Google Git
Sign in
apache / echarts-www / refs/heads/2.x / . / doc / doc-en.html
blob: 5000bea8695d09e0df19f83df6e35645ac2b14d7 [file] [log] [blame]
<!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.0">
<meta name="robots" content="noindex, nofollow">
<title>ECharts2 · Doc</title>
<link rel="shortcut icon" href="./asset/ico/favicon.png">
<link href="./asset/css/font-awesome.min.css" rel="stylesheet">
<link href="./asset/css/bootstrap.css" rel="stylesheet">
<link href="./asset/css/carousel.css" rel="stylesheet">
<link href="./asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js 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]-->
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-3">
<div class="affix panel col-md-3" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-description">
<strong>Contents</strong>
</div>
</div>
<div id="collapse-description" class="panel-collapse collapse in">
<div class="panel-body">
<div id="toc">
<ul>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Glossary">Glossary</a></li>
<li><a href="#Chart-Types">Chart Types</a></li>
<ul>
<li><a href="#Line">line</a></li>
<li><a href="#Bar">bar</a></li>
<li><a href="#Scatter">scatter</a></li>
<li><a href="#Candlestick">candlestick</a></li>
<li><a href="#Pie">pie</a></li>
<li><a href="#Radar">radar</a></li>
<li><a href="#Chord">chord</a></li>
<li><a href="#Force">force</a></li>
<li><a href="#Map">map</a></li>
<li><a href="#Heatmap">heatmap</a></li>
<li><a href="#Gauge">gauge</a></li>
<li><a href="#Funnel">funnel</a></li>
<li><a href="#eventRiver">eventRiver</a></li>
<li><a href="#treemap">treemap</a></li>
<li><a href="#treeChart">tree</a></li>
<li><a href="#venn">venn</a></li>
<li><a href="#wordCloud">wordCloud</a></li>
</ul>
<li><a href="#Import-ECharts">Import ECharts</a></li>
<ul>
<li><a href="#Import-ECharts1">modular package import</a></li>
<li><a href="#Import-ECharts2">modular single file import ( <b>preferred</b> )</a></li>
<li><a href="#Import-ECharts3">plain single file import</a></li>
</ul>
<li><a href="#Custom-Build-Echarts-Single-File">Custom Build ECharts Single File</a></li>
<li><a href="#Initialization">Initialization</a></li>
<li><a href="#Instance-Methods">Instance Methods</a></li>
<li><a href="#Options">Options</a></li>
<ul>
<li><a href="#Option">option</a></li>
<li><a href="#Timeline">timeline</a></li>
<li><a href="#Title">title</a></li>
<li><a href="#Toolbox">toolbox</a></li>
<li><a href="#Tooltip">tooltip</a></li>
<li><a href="#Legend">legend</a></li>
<li><a href="#DataRange">dataRange</a></li>
<li><a href="#DataZoom">dataZoom</a></li>
<li><a href="#RoamController">roamController</a></li>
<li><a href="#Grid">grid</a></li>
<li><a href="#Xaxis">xAxis</a></li>
<li><a href="#Yaxis">yAxis</a></li>
<li><a href="#Axis">axis</a></li>
<ul>
<li><a href="#AxisAxisline">axisLine</a></li>
<li><a href="#AxisAxistick">axisTick</a></li>
<li><a href="#AxisAxislabel">axisLabel</a></li>
<li><a href="#AxisSplitline">splitLine</a></li>
<li><a href="#AxisSplitarea">splitArea</a></li>
<li><a href="#AxisData">data</a></li>
</ul>
<li><a href="#Polar">polar</a></li>
<li><a href="#Series">series (universal)</a></li>
<ul>
<li><a href="#SeriesCartesian">series (Cartesian)</a></li>
<li><a href="#SeriesPie">series (pie) </a></li>
<li><a href="#SeriesRadar">series (radar) </a></li>
<li><a href="#SeriesMap">series (map) </a></li>
<li><a href="#SeriesHeatmap">series (heatmap) </a></li>
<li><a href="#SeriesHeatmap">series (map) </a></li>
<li><a href="#SeriesForce">series (force) </a></li>
<li><a href="#SeriesChord">series (chord) </a></li>
<li><a href="#SeriesGauge">series (gauge) </a></li>
<li><a href="#SeriesFunnel">series (funnel) </a></li>
<li><a href="#SeriesEventRiver">series (eventRiver)</a></li>
<li><a href="#SeriesTreemap">series (treemap)</a></li>
<li><a href="#SeriesTree">series (tree)</a></li>
<li><a href="#SeriesVenn">series (venn)</a></li>
<li><a href="#SeriesWordCloud">series (wordCloud)</a></li>
<li><a href="#SeriesData">data</a></li>
<li><a href="#SeriesMarkPoint">markPoint</a></li>
<ul>
<li><a href="#SeriesMarkPointData">data</a></li>
</ul>
<li><a href="#SeriesMarkLine">markLine</a></li>
<ul>
<li><a href="#SeriesMarkLineData">data</a></li>
</ul>
</ul>
<li><a href="#ItemStyle">itemStyle</a></li>
<li><a href="#LineStyle">lineStyle</a></li>
<li><a href="#AreaStyle">areaStyle</a></li>
<li><a href="#TextStyle">textStyle</a></li>
<li><a href="#Loadingoption">loadingOption</a></li>
<li><a href="#NoDataLoadingOption">noDataLoadingOption</a></li>
<li><a href="#BackgroundColor">backgroundColor</a></li>
<li><a href="#Color">color</a></li>
<li><a href="#SymbolList">symbolList</a></li>
<li><a href="#RenderAsImage">renderAsImage</a></li>
<li><a href="#Calculable">calculable</a></li>
<li><a href="#CalculableColor">calculableColor</a></li>
<li><a href="#CalculableHolderColor">calculableHolderColor</a></li>
<li><a href="#NameConnector">nameConnector</a></li>
<li><a href="#ValueConnector">valueConnector</a></li>
<li><a href="#Animation">animation</a></li>
<li><a href="#AddDataAnimation">addDataAnimation</a></li>
<li><a href="#AnimationThreshold">animationThreshold</a></li>
<li><a href="#AnimationDuration">animationDuration</a></li>
<li>
<a href="#animationDurationUpdate">animationDurationUpdate</a>
</li>
<li><a href="#AnimationEasing">animationEasing</a></li>
</ul>
<li><a href="#GraphDataStructure">Graph data structure</a></li>
<ul>
<li><a href="#categories">categories</a></li>
<li><a href="#nodes(data)">nodes(data)</a></li>
<li><a href="#GraphLinks">links</a></li>
<li><a href="#GraphMatrix">matrix</a></li>
</ul>
<li><a href="#Multi-Level-Control">Multi-Level Control</a></li>
<li><a href="#Appendix-Map-Extension">Appendix: Map Extension</a></li>
<li><a href="#Appendix-Component-and-Chart-Instances">Appendix: Component and Chart Instances</a></li>
<ul>
<li><a href="#Appendix-Component-Instances">Appendix: Component Instances</a></li>
<ul>
<li><a href="#TimelineInterface">timeline</a></li>
<li><a href="#TooltipInterface">tooltip</a></li>
<li><a href="#LegendInterface">legend</a></li>
<li><a href="#DataRangeInterface">dataRange</a></li>
<li><a href="#DataZoomInterface">dataZoom</a></li>
<li><a href="#GridInterface">grid</a></li>
<li><a href="#AxisInterface">xAxis/yAxis</a></li>
<li><a href="#CategoryAxisInterface">categoryAxis</a></li>
<li><a href="#ValueAxisInterface">valueAxis</a></li>
<li><a href="#PolarInterface">polar</a></li>
</ul>
<li><a href="#Appendix-Chart-Instances">Appendix: Chart Instances</a></li>
<ul>
<li><a href="#MapInterface">map</a></li>
</ul>
</ul>
<li><a href="#Appendix-an-Intuitive-Example">Appendix: an Intuitive Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-config">
<strong>default options</strong>
</div>
</div>
<div id="collapse-config" class="panel-collapse collapse">
<div class="panel-body">
<div id="config"></div>
</div>
</div>
</div>
</div><!--/.well -->
</div>
<div class="col-md-9">
<p style="margin:20px 0 -30px 0">
<a href="./start-en.html" target="_blank" style="margin-right: 50px;"> Getting started »</a>
<a href="https://github.com/ecomfe/echarts/issues?page=1&state=open" target="_blank">Any feedback or question? »</a>
</p>
<div id="doc">
<h3>Introduction<a name="Introduction"> </a></h3>
<p>ECharts (Enterprise Charts), written in pure JavaScript and based on <a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> (a whole new lightweight canvas library), is a comprehensive charting library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It works with all your web and mobile applications, including IE6/7/8/9/10/11, Chrome, Firefox, Safari and Opera. With original features like Drag-Recalculate, Data View and Scale Roaming, ECharts lets you mine and integrate data in ways you didn't think possible.</P>
<p>ECharts currently supports 12 chart types, including line (area), column (bar), scatter (bubble), pie (doughnut), radar (filled radar), candlestick, chord, gauge, funnel, map, eventRiver and force-directed chart. Each and every chart is equipped with 7 interactive components: title, tooltip, legend, scale, data area, timeline, and toolbox. Many of these components and charts can be combined in one chart.</P>
<img src="asset/img/architecture.png" alt="Echarts Architecture"/>
<h3>Glossary<a name="Glossary"> </a></h3>
<p>General Terms</p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Term </th>
<th> Description </th>
</tr>
<tr>
<td> chart </td>
<td> A complete chart that may contain axes, legends, etc. It can either be a "basic" chart like line and pie, or a "combination" of those basic charts. </td>
</tr>
<tr>
<td> axis </td>
<td> A fixed reference line for the measurement of Cartesian coordinates. It can be divided into three types: category axis, value axis and time axis. </td>
</tr>
<tr>
<td> xAxis </td>
<td> The horizontal axis of a two-dimensional plot in Cartesian coordinates. It is category axis by convention and default. </td>
</tr>
<tr>
<td> yAxis </td>
<td> The vertical axis of a two-dimensional plot in Cartesian coordinates. It is value axis by convention and default. </td>
</tr>
<tr>
<td> grid </td>
<td> A network of regularly spaced lines on a Cartesian coordinate system that cross one another at right angles and are numbered to enable the precise location of a coordinate. </td>
</tr>
<tr>
<td> legend </td>
<td> The wording on a chart explaining the symbols used. </td>
</tr>
<tr>
<td> dataRange </td>
<td> Often used to select the scale of geographical data. </td>
</tr>
<tr>
<td> dataZoom </td>
<td> Often used to zoom in on a specific data area when the collection of data sets are large and complex. </td>
</tr>
<tr>
<td> roamController </td>
<td> Zoom and roam controller for the map. </td>
</tr>
<tr>
<td> toolbox </td>
<td> A set of functions accessible from a single menu, such as MarkLine, dataZoom, etc.</td>
</tr>
<tr>
<td> tooltip </td>
<td> A small "hover box" with detailed information about the item being hovered over. </td>
</tr>
<tr>
<td> timeline </td>
<td> Often used to display a list of data in chronological order. </td>
</tr>
<tr>
<td> series </td>
<td> Data series. A chart may contain multiple series, and each series may contain multiple data. </td>
</tr>
</table>
<P> Charts Terms</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Term </th>
<th> Description </th>
</tr>
<tr>
<td> line </td>
<td> Including line, stacked line, area, stacked area. </td>
</tr>
<tr>
<td> bar </td>
<td> Including colunm (vertical), stacked column, bar (horizontal), stacked bar. </td>
</tr>
<tr>
<td> scatter </td>
<td> Including scatter and bubble. In scatter, at least two-dimensional data are needed. When the third dimensional data joins the company, it can be mapped to color or size. When mapped to size, scatter turns into bubble. </td>
</tr>
<tr>
<td> candlestick </td>
<td> We call it 'k' for short. Used primarily to describe price movements of a security, derivative, or currency for a designated span of time. </td>
</tr>
<tr>
<td> pie </td>
<td> Including pie and doughnut. Supports two kinds of (radius, area) Nightingale’s rose diagram. </td>
</tr>
<tr>
<td> radar </td>
<td> Including radar and filled radar. A graphical method of displaying multivariate data. </td>
</tr>
<tr>
<td> chord </td>
<td> Commonly used to display relational data. The outer part is a doughnut, used to reflect the proportion of data; the inner part is the chords that connect each sectors, used to display relational data. </td>
</tr>
<tr>
<td> force-directed chart </td>
<td> Often used to display complex topology. </td>
</tr>
<tr>
<td> map </td>
<td> Including World Map, China Map, Map of China Provinces &amp; Cities, and extended maps on GeoJSON format. Supports SVG extension, such as body composition, football pitch, interior space, etc. </td>
</tr>
<tr>
<td> heatmap </td>
<td> Often used to display data distribution information. </td>
</tr>
<tr>
<td> gauge </td>
<td> Often used to display the key index in a BI system. </td>
</tr>
<tr>
<td> funnel </td>
<td> Often used to display the data change in a data process, like filtered, combined etd, common in BI system.</td>
</tr>
<tr>
<td> evnetRiver </td>
<td> EventRiver is commonly used to display multiple events with time attribute, the evolution of events can be shown by time sequence.</td>
</tr>
<tr>
<td> treemap </td>
<td> Treemap is commonly used to display a tree structure. And treemaps are very effective when size is the most important feature to be displayed..</td>
</tr>
<tr>
<td> venn </td>
<td> Venn shows all possible logical relations between a finite collection of different sets.</td>
</tr>
<tr>
<td> tree </td>
<td> Used to visualize the hierarchy of tree structure.</td>
</tr>
<tr>
<td> word cloud </td>
<td> A visual representation for text data, typically used to depict keyword metadata (tags) on websites, or to visualize free form text</td>
</tr>
</table>
<h3>Chart Types<a name="Chart-Types"> </a></h3>
<P> The charting library includes basic single chart type and combination chart type. </P>
<p><img src="./asset/img/doc/charts.jpg" title="basic chart type" alt="basic chart type"/></P>
<h4>single chart type: line<a name="Line"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> line </th>
<th> stacked line </th>
<th> area </th>
<th> stacked area </th>
</tr>
<tr>
<td><img src="./asset/img/example/line1.png" title="" alt="line"/></td>
<td><img src="./asset/img/example/line2.png" title="" alt="stacked line"/></td>
<td><img src="./asset/img/example/line3.png" title="" alt="area"/></td>
<td><img src="./asset/img/example/line4.png" title="" alt="stacked area"/></td>
</tr>
</table>
<h4>single chart type: bar (column)<a name="Bar"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> column </th>
<th> stacked column </th>
<th> bar </th>
<th> stacked bar </th>
</tr>
<tr>
<td><img src="./asset/img/example/bar1.png" title="" alt="column"/></td>
<td><img src="./asset/img/example/bar2.png" title="" alt="stacked column"/></td>
<td><img src="./asset/img/example/bar3.png" title="" alt="bar"/></td>
<td><img src="./asset/img/example/bar4.png" title="" alt="stacked bar"/></td>
</tr>
</table>
<h4>single chart type: scatter<a name="Scatter"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> scatter </th>
<th> bubble </th>
</tr>
<tr>
<td><img src="./asset/img/example/scatter1.png" title="" alt="scatter"/></td>
<td><img src="./asset/img/example/dataRange1.png" title="" alt="scatter"/></td>
<td><img src="./asset/img/example/scatter2.png" title="" alt="bubble"/></td>
</tr>
</table>
<h4>single chart type: k (candlestick)<a name="Candlestick"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="2"> candlestick </th>
</tr>
<tr>
<td style="text-align:center"><img src="./asset/img/example/k1.png" title="" alt="candlestick" /></td>
<td style="text-align:center"><img src="./asset/img/example/k.png" title="" alt="candlestick" /></td>
</tr>
</table>
<h4>single chart type: pie<a name="Pie"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> pie </th>
<th> doughnut </th>
<th> Nightingale’s rose diagram</th>
</tr>
<tr>
<td><img src="./asset/img/example/pie1.png" title="" alt="pie"/></td>
<td><img src="./asset/img/example/pie2.png" title="" alt="doughnut"/></td>
<td><img src="./asset/img/example/pie4.png" title="" alt="Nightingale’s rose diagram"/></td>
</tr>
</table>
<h4>single chart type: radar<a name="Radar"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> radar </th>
<th> filled radar </th>
</tr>
<tr>
<td><img src="./asset/img/example/radar1.png" title="" alt="radar"/></td>
<td><img src="./asset/img/example/radar2.png" title="" alt="filled radar"/></td>
</tr>
</table>
<h4>single chart type: chord<a name="Chord"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="2"> chord </th>
</tr>
<tr>
<td><img src="./asset/img/example/chord1.png" title="" alt="chord"/></td>
<td><img src="./asset/img/example/chord2.png" title="" alt="chord"/></td>
</tr>
</table>
<h4>single chart type: force<a name="Force"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="3"> force-directed chart </th>
</tr>
<tr>
<td><img src="./asset/img/example/force1.png" title="" alt="force-directed chart"/></td>
<td><img src="./asset/img/example/force2.png" title="" alt="force-directed chart"/></td>
<td><img src="./asset/img/example/webkit-dep.png" title="" alt="force-directed chart"/></td>
</tr>
</table>
<h4>single chart type: map<a name="Map"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> China Map </th>
<th> Map of China Provinces &amp; Cities </th>
<th> World Map </th>
</tr>
<tr>
<td><img src="./asset/img/example/map1.png" title="" alt="China Map"/></td>
<td><img src="./asset/img/example/map3.png" title="" alt=" Map of China Provinces &amp; Cities"/></td>
<td><img src="./asset/img/example/map4.png" title="" alt="World Map"/></td>
</tr>
<tr>
<th> Sub-Region Mode </th>
<th> Standard GeoJson Extension </th>
<th> SVG Extension</th>
</tr>
<tr>
<td><img src="./asset/img/example/map8.png" title="" alt="Sub-Region Mode"/></td>
<td><img src="./asset/img/example/map6.png" title="" alt="Standard GeoJson Extension"/></td>
<td><img src="./asset/img/example/map16.png" title="" alt="SVG Extension"/></td>
</tr>
</table>
<h4>single chart type: heatmap<a name="Heatmap"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan="3"> heatmap </th>
</tr>
<tr>
<td><img src="./asset/img/example/heatmap.png" title="" alt="heatmap"/></td>
<td><img src="./asset/img/example/heatmap2.png" title="" alt="heatmap"/></td>
<td><img src="./asset/img/example/heatmap_map.png" title="" alt="heatmap"/></td>
</tr>
</table>
<h4>single chart type: gauge<a name="Gauge"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> angular gauge </th>
</tr>
<tr>
<td><img src="./asset/img/example/gauge4.png" title="" alt="angular gauge"/></td>
<td><img src="./asset/img/example/gauge3.png" title="" alt="angular gauge"/></td>
</tr>
</table>
<h4>single chart type: funnel<a name="Funnel"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=3> funnel </th>
</tr>
<tr>
<td><img src="./asset/img/example/funnel1.png" title="" alt="funnel"/></td>
<td><img src="./asset/img/example/funnel2.png" title="" alt="funnel"/></td>
<td><img src="./asset/img/example/funnel3.png" title="" alt="funnel"/></td>
</tr>
</table>
<h4>single chart type: eventRiver<a name="eventRiver"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=3> eventRiver </th>
</tr>
<tr>
<td><img src="./asset/img/example/eventRiver1.png" title="" alt="eventRiver"/></td>
<td><img src="./asset/img/example/eventRiver2.png" title="" alt="eventRiver"/></td>
</tr>
</table>
<h4>single chart type：treemap<a name="treemap"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> Treemap </th>
</tr>
<tr>
<td><img src="./asset/img/example/treemap.png" title="" alt="Treemap"/></td>
<td><img src="./asset/img/example/treemap1.png" title="" alt="Treemap"/></td>
</tr>
</table>
<h4>single chart type：tree<a name="treeChart"> </a></h4>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th colspan=2> tree </th>
</tr>
<tr>
<td><img src="./asset/img/example/tree1.png" title="" alt="tree"/></td>
<td><img src="./asset/img/example/tree2.png" title="" alt="tree"/></td>
</tr>
</table>
<h4>single chart type：venn<a name="venn"> </a></h4>
<table cellspacing="0" class="ADoc_table full" style="width:600px;">
<tr>
<th colspan=1> Venn </th>
</tr>
<tr>
<td><img src="./asset/img/example/venn.png" title="" alt="Venn"/></td>
</tr>
</table>
<h4>single chart type：wordCloud<a name="wordCloud"> </a></h4>
<table cellspacing="0" class="ADoc_table full" style="width:600px;">
<tr>
<th colspan=1> Venn </th>
</tr>
<tr>
<td><img src="./asset/img/example/wordCloud.png" title="" alt="Venn"/></td>
</tr>
</table>
<h3>Import ECharts<a name="Import-ECharts"> </a></h3>
<p>We offer you various ways to import the ECharts library in your page, so that you can always choose the right one for your project. </p>
<h3>modular package import <a name="Import-ECharts1"> </a></h3>
<P>If you are familiar with modular programming, and your project is modular and follows the AMD module specification, then it will be fairly easy to import echarts in your page; Import a module loader, like <a href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>, and configure the packages path to point to src, and you will enjoy the chart’s maximum flexibility, such as load-on-demand. Since ECharts is based on ZRender, you also need to download <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a> locally. Reference is made to <a href="example/demo.html#-en" target="_blank">demo</a>. Now you need to configure as follows.</p>
<p>Please note: although package import maximizes flexibility in the development phase, it is not intended for going online directly. Reducing the number of documents requested is the most fundamental rule of front-end optimization, so please be sure to compress files when you go on line. </P>
<div class="code">
<pre>//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender and echarts are in the same directory.
main: 'zrender'
}
]
});
</pre>
</div>
<h3>modular single file import (<b>preferred</b>) <a name="Import-ECharts2"> </a></h3>
<P>If you use modular programming, but do not have the packaging environment, or do not want to include a third party library source file to your project, then single file import seems to be a good choice. Like modular package import, you have to be familiar with modular programming. </P>
<p>Begin with 2.1.8, we have created a powerful tool for echarts compression: <a href="https://github.com/ecomfe/echarts-optimizer" target="_blank">echarts-optimizer</a>. As you can see below, the build folder has included several single files of different combinations which are generated by <a href="https://github.com/ecomfe/echarts-optimizer" target="_blank">echarts-optimizer</a>, and you are free to choose one of them according to your needs:</p>
<ul>
<li>dist ( folder ) : compressed</li>
<li>
<ul>
<li>echarts.js : The echarts core file which should be import by a &lt;script&gt tag, an AMD loader (<a href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>) has been included in this file.</li>
<li>chart ( folder ) : Via dependency analysis, echarts-optimizer generates a single file for every chart types, you can choose one of them according to your needs:
<ul>
<li>line.js : Line ( require echarts/chart/bar as the same time if Magic switch is needed )</li>
<li>bar.js : Bar ( require echarts/chart/line as the same time if Magic switch is needed )</li>
<li>scatter.js : Scatter</li>
<li>k.js : Candlestick</li>
<li>pie.js : Pie ( require echarts/chart/funnel as the same time if Magic switch is needed )</li>
<li>radar.js : Radar</li>
<li>map.js : Map</li>
<li>force.js : Force-directed Chart ( require echarts/chart/chord as the same time if Magic switch is needed )</li>
<li>chord.js : Chord ( require echarts/chart/force as the same time if Magic switch is needed )</li>
<li>funnel.js : Funnel ( require echarts/chart/pie as the same time if Magic switch is needed )</li>
<li>gauge.js : Gauge</li>
<li>eventRiver.js : EventRiver</li>
</ul>
</li>
</ul>
</li>
<li>source ( folder ) : uncompressed, same as dist which can be used to debug.</li>
</ul>
<p>See example in <a href="example/www/index.html" target="_blank">ECharts single file import</a>, stored in example/www. First you need to create a script tag src to echarts core ( echarts.js ).</p>
<div class="code">
<pre>//from echarts example
&lt;body&gt;
&lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
...
&lt;script src="./js/echarts.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</pre>
</div>
<p>You have get an AMD environment after echarts.js import, require.conifg as below:</p>
<div class="code">
<pre>//from echarts example
&lt;body&gt;
&lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
...
&lt;script src="./js/echarts.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
require.config({
paths: {
echarts: './js/dist'
}
});
&lt;/script&gt;
&lt;/body&gt;
</pre>
</div>
<p>You can use ECharts by dynamic loading after the require.config.</p>
<div class="code">
<pre>//from echarts example
&lt;body&gt;
&lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
...
&lt;script src="./js/echarts.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // load-on-demand, don't forget the Magic switch type.
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
&lt;/script&gt;
&lt;/body&gt;
</pre>
</div>
<p>In a nutshell, it takes four steps to import ECharts in module single file. </p>
<ol>
<li>Prepare a Dom with size (width and height) for ECharts. (Of course it can be dynamically generated.)</li>
<li>Create a script tag src to echarts core ( echarts.js ).</li>
<li>Configure a ECharts path for the module loader, and link to echarts.js from the current page, see above.</li>
<li>Dynamically load ECharts and use callback function to initialize it. (PS: if you want to use ECharts on a page where you've already loaded it, just require('echarts').init(dom).) </li>
</ol>
<p>see <a href="./start.html" target="_blank" style="margin-right: 50px;">Getting started »</a></p>
<h3>plain single file import <a name="Import-ECharts3"> </a></h3>
<P>The 1.3.5 release added support for plain import. If your project is not based on modularity, or it’s based on CMD specification (such as using sea.js), then it may not be appropriate for you to include the modular AMD-based ECharts. Therefore it is recommended that you use script plain import. Forget about require, you can directly use two global namespaces - ECharts, ZRender - after script plain import. Reference is made to <a href="example/www2/index.html" target="_blank">ECharts plain import</a>. Note that excanvas judges Canvas support by inserting the body tag into Canvas node, so if you put the script tag of ECharts into the head tag, IE8- browsers would give an error; the solution is to move the script tag into (behind) the body tag.</p>
<p>In the plain import environment, you can import common modules directly through namespace, same as the modular path, such as: <br/>echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color'). </p>
<div class="code">
<pre>//from echarts example
&lt;body&gt;
&lt;div id="main" style="height:400px;"&gt;&lt;/div&gt;
...
&lt;script src="example/www2/js/dist/echarts-all.js"&gt;&lt;/script&gt;
&lt;script&gt;
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
&lt;/script&gt;
&lt;/body&gt;
</pre>
</div>
<p>Single files that can be directly imported are listed below:</p>
<ul>
<li>dist/echarts-all.js : a compressed library of all the chart types, including World Map, China Map and Map of China Provinces &amp; Cities.</li>
<li>source/echarts-all.js : an uncompressed library of all the chart types, including World Map, China Map and Map of China Provinces &amp; Cities. Available for debugging purposes.</li>
</ul>
<p>see <a href="./start.html" target="_blank" style="margin-right: 50px;">Getting started »</a></p>
<h3>Custom Build ECharts Single File <a name="Custom-Build-Echarts-Single-File"></a></h3>
<p>More detail about echarts-optimizer can be found at <a href="https://github.com/ecomfe/echarts-optimizer/blob/master/README.md" target="_blank">README.md</a></p>
<h3>Initialization <a name="Initialization"> </a></h3>
<p>After getting echarts interface through require (or in namespace), you can start to initialize chart. echarts interface has only one init method. When implementing init, pass in a dom node with size (width and height are not necessarily visible, as long as they can be calculated) and then you will get the instances of the chart object. The charting library has multiple instances, which means that you can init multiple charts at the same page on multiple doms, and if you init on the same dom repeatedly, the existing instance will be automatically disposed (1.4.0+ ). init method is illustrated as follows: </p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Name </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{ECharts}</b> init </td>
<td> <b>{dom}</b> dom, <br/><b>{string | Object =}</b> theme </td>
<td> Initialization interface, returns ECharts instances. Dom is the node for charts. Theme is optional. For built-in themes ('macarons', 'infographic'), directly pass in name. For custom extended themes, pass in the theme object. Like this :
<br/>var myCharts = echarts.init(document.getElementById('main'), 'macarons')；
</td>
</tr>
</table>
<p>For available methods of chart instances, see <a href="#Methods">Methods</a>. </p>
<p>The initialization code after including ECharts is as follows: </p>
<div class="code">
<pre>
// As the entrance
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({...});
}
);
// -----------------------------
// For non-entrance or when using again, the chart has been loaded and registered
require('echarts').init(dom).setOption({...});
// If you need to use of ECharts later on, you'd better save the chart instances returned by init.
var myChart = require('echarts').init(dom);
myChart.setOption({...}); </pre>
</div>
<p>If you are familiar with modularity, you may skip the following code. </p>
<div class="code">
<pre>
// If you are strange to modularity, you can...
var echarts;
require(['echarts'], function (ec){
echarts = ec;
});
// Yes, save echarts after loading it, and use it as namespace. </pre>
</div>
<h3>Instance Methods<a name="Instance-Methods"> </a></h3>
<p>Instance refers to the object returned by interface init (), such as "myChart" in the code above. All the non-get interfaces return themselves to support chained calls.</p>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Name </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td><b>{self}</b> setOption</td>
<td><b>{Object}</b> option, <br/><b>{boolean=}</b> notMerge</td>
<td>Universal interface, controls all the configuration options of chart instances (see <a href="#Option" title="">option</a>). When called multiple times, the option will be merged by default, which makes setOption easily become a universal method to update any attributes. For example, if you only want to change the title text, you only need to: <br/>&nbsp;&nbsp;&nbsp;&nbsp;setOption({title : {text : 'new title'}}); <br/>Of course, you can also stop the option from being merged with the last option by setting the notMerger parameter to true, when data or length changes between each setOption.
<br/><br/>Since 2.0.0, ECharts added support for timeline the component. When option includes timeline (see <a href="#Timeline" title="">timeline</a>), each individual option should be placed into an array named options, such as
<pre>myCharts.setOption({
timeline : {...},
options : [
{ // option1
title : {...},
series : [...]
},
{...}, // option2
...
]
});</pre>
</td>
</tr>
<tr>
<td><b>{Object}</b> getOption</td>
<td><b>{void}</b></td>
<td>Returns the clone (copy) of the currently displayed option held internally. </td>
</tr>
<tr>
<td><b>{self}</b> setSeries</td>
<td><b>{Array}</b> series, <br/><b>{boolean=}</b> notMerge</td>
<td>Data interface, the data array generated by data-driven chart. (see <a href="#Series" title="">series</a>), same result as calling setOption({series : {...}}, notMerge). </td>
</tr>
<tr>
<td><b>{Object}</b> getSeries</td>
<td><b>{void}</b></td>
<td>Returns the clone (copy) of the currently displayed option held internally, same result as returning getOption().series. </td>
</tr>
<tr>
<td><b>{self}</b> addData</td>
<td>One set of data：
<br/><b>{number}</b> seriesIdx
<br/><b>{number | Object}</b> data
<br/><b>{boolean=}</b> isHead
<br/><b>{boolean=}</b> dataGrow
<br/><b>{string=}</b> additionData
<br/>Add multiple sets of data:
<br/><b>{Array}</b> params
</td>
<td>Dynamic data interface. <a href="example/dynamicLineBar.html#-en" target="_blank">Try this (Line &amp; Bar) »</a> <a href="example/dynamicScatterK.html#-en" target="_blank">Try this (Scatter &amp; Candlestick) »</a> <a href="example/dynamicPieRadar.html#-en" target="_blank">Try this (Pie &amp; Radar) »</a>
<br/>seriesIdx: series index
<br/>data: adds data
<br/>isHead: whether to insert at the head of the line. Defaults to unspecified. When unspecified or false, insert at the end of the line.
<br/>dataGrow: whether to increase the length of the data line. Defaults to unspecified. When unspecified or false, remove the data of the target array.
<br/>additionData: whether to add category axis (pie as the legend) data. Other operations are same as isHead and dataGrow.
<br/>When adding multiple sets of data, parameters are:
<br/>params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
</td>
</tr>
<tr>
<td><b>{self}</b> addMarkPoint</td>
<td><b>{number}</b> seriesIdx
<br/><b>{Object}</b> markData
</td>
<td>add markPoint interface, which includes
<br/>seriesIdx: series index
<br/>markData: [markLine] object, same as <a href="#SeriesMarkPoint" title="">series.markPoint</a>, supports multiple
</td>
</tr>
<tr>
<td><b>{self}</b> addMarkLine</td>
<td><b>{number}</b> seriesIdx
<br/><b>{Object}</b> markData
</td>
<td>add markPoint interface, which includes
<br/>seriesIdx: series index
<br/>markData: [markLine] object, same as <a href="#SeriesMarkLine" title="">series.markLine</a>, supports multiple
</td>
</tr>
<tr>
<td><b>{self}</b> delMarkPoint</td>
<td><b>{number}</b> seriesIdx
<br/><b>{string}</b> markName
</td>
<td>delete a single markPoint interface, which includes
<br/>seriesIdx: series index
<br/>markName: [markPoint] name
</td>
</tr>
<tr>
<td><b>{self}</b> delMarkLine</td>
<td><b>{number}</b> seriesIdx
<br/><b>{string}</b> markName
</td>
<td>delete a single markLine interface, which includes
<br/>seriesIdx: series index
<br/>markName: [markLine] name. The default makeLine name is the starting point's name in the makeLine's data. While the ending point is named too, like the map, both point's name would be joined as the default name like this "nameStart > nameEnd", such as
<br/>[{name:'Beijing', value:100}, {name:'Shanghai'}]
<br/>In this case, markName is "Beijing > notMerge"
</td>
</tr>
<tr>
<td><b>{self}</b> on</td>
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
<td>event bind, mount all the event naming on require ('echarts/config'). EVENT (echarts.config.EVENT for non-modular) namespace. It is recommended that you use this namespace as the event name to include. Events supported by the current version are:
<br/>-----------------------Base Evetn-----------------------
<br/>REFRESH,
<br/>RESTORE,
<br/>RESIZE,
<br/>CLICK,
<br/>DBLCLICK,
<br/>HOVER,
<br/>MOUSEOUT,
<br/>-------------------Interactive Event--------------------
<br/>DATA_CHANGED,
<br/>DATA_VIEW_CHANGED,
<br/>MAGIC_TYPE_CHANGED,
<br/>TIMELINE_CHANGED,
<br/>DATA_ZOOM,
<br/>DATA_RANGE,
<br/>DATA_RANGE_SELECTED,
<br/>DATA_RANGE_HOVERLINK,
<br/>LEGEND_SELECTED,
<br/>LEGEND_HOVERLINK,
<br/>MAP_ROAM,
<br/>MAP_SELECTED,
<br/>PIE_SELECTED,
<br/>FORCE_LAYOUT_END,
<br/><a href="./example/event.html#-en" target="_blank">event debugging » </a>
</td>
</tr>
<tr>
<td><b>{self}</b> un</td>
<td><b>{string}</b> eventName, <br/><b>{Function}</b> eventListener</td>
<td>unbind event </td>
</tr>
<tr>
<td><b>{self}</b> setTheme</td>
<td><b>{string | Object}</b> theme</td>
<td> Set the theme. For built-in themes ('macarons', 'infographic'), pass in the name directly. For custom extended themes, pass in the theme object. </td>
</tr>
<tr>
<td><b>{self}</b> connect</td>
<td><b>{ECharts | Array &lt;ECharts&gt;}</b> connectTarget</td>
<td>Chart Linkage, the linkage target passed in is ECharts instance, supports arrays. Supports tooltip linkage in Cartesian charts, automatic stitching of the saved images. The supported linkage events are:
<br/>REFRESH，RESTORE，MAGIC_TYPE_CHANGED
<br/>DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED
<br/><a href="./example/mix8.html#-en" target="_blank">Chart Linkage »</a>
</td>
</tr>
<tr>
<td><b>{self}</b> disConnect</td>
<td><b>{ECharts | Array &lt;ECharts&gt;}</b> connectTarget</td>
<td>Disconnect chart linkage </td>
</tr>
<tr>
<td><b>{self}</b> showLoading</td>
<td><b>{Object}</b> loadingOption</td>
<td>Option for the loading screen, (see <a href="#Loadingoption" title="">loadingOption</a>), show a loading label text. <a href="example/loading.html#-en" target="_blank">try this »</a></td>
</tr>
<tr>
<td><b>{self}</b> hideLoading</td>
<td><b>{void}</b></td>
<td>Option for the loading screen, hide the loading screen. </td>
</tr>
<tr>
<td><b>{ZRender}</b> getZrender</td>
<td><b>{void}</b></td>
<td>Get the ZRender instance used by the current chart, available for extra images addition or a high level of customization. For zrender interface, see <a href="http://ecomfe.github.io/zrender/doc/doc.html#zrenderInstance" target="_blank">ZRender</a>. </td>
</tr>
<tr>
<td><b>{string}</b> getDataURL</td>
<td><b>{string=}</b> imgType</td>
<td>Get the current chart's Base64 image dataURL, not supported on IE8-, imgType: image type. Supports png|jpeg. Defaults to png. </td>
</tr>
<tr>
<td><b>{Dom}</b> getImage</td>
<td><b>{string=}</b> imgType</td>
<td>Get the current chart's imag, imgType: image type. Supports png|jpeg. Defaults to png. </td>
</tr>
<tr>
<td><b>{self}</b> resize</td>
<td><b>{void}</b></td>
<td>ECharts does not bind the resize event, and the internal system do not know whether the size of the display area changes or not. So you can bind the events you need, update the area by calling resize. Like window.onresize = myChart.resize.</td>
</tr>
<tr>
<td><b>{self}</b> refresh</td>
<td><b>{void}</b></td>
<td>Refresh the chart. LEGEND_SELECTED, DATA_ZOOM and DRAG remain unchanged. </td>
</tr>
<tr>
<td><b>{self}</b> restore</td>
<td><b>{void}</b></td>
<td>Restore the chart. All the states are cleared and restored to the original states. </td>
</tr>
<tr>
<td><b>{self}</b> clear</td>
<td><b>{void}</b></td>
<td>Clear the drawing content. Instances are available after Clearing. </td>
</tr>
<tr>
<td><b>{void}</b> dispose</td>
<td><b>{void}</b></td>
<td>Dispose the chart instances. Instances are unavailable after disposing. </td>
</tr>
</table>
<h3>Options<a name="Options"> </a></h3>
<h4>option<a name="Option"> </a></h4>
<P> Chart options, including all the configuration options for ECharts demos: <span class='bgGreen'> general options </span>, <span class='bgRed'> component options </span>, <span class='bgBlue'> data options </span></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Name </th>
<th> Description </th>
</tr>
<tr class='bgGreen'>
<td> <b>{color}</b> backgroundColor </td>
<td> The background color or gradient for the outer chart area, (see <a href="#BackgroundColor" title="">backgroundColor</a>). Support rgba and defaults to null, transprent. </td>
</tr>
<tr class='bgGreen'>
<td> <b>{Array}</b> color </td>
<td> List of color for the array series, (see <a href="#Color" title="">color</a>), possible array is: ['#87cefa', 'rgba(123,123,123,0.5)','...']. When there are more series than colors in the list, new colors are pulled from the start again. </td>
</tr>
<tr class='bgGreen'>
<td> <b>{boolean}</b> renderAsImage </td>
<td> Allows rendering as image in any browser but IE8-, (see <a href="#RenderAsImage" title="">renderAsImage</a>). </td>
</tr>
<tr class='bgGreen'>
<td> <b>{boolean}</b> calculable </td>
<td> Specifies whether the drag-recalculate feature will be enabled. Defaults to false. (See <a href="#calculable" title="">calculable</a>, and other related properties like
<a href="#CalculableColor" title="">calculableColor</a>,
<a href="#CalculableHolderColor" title="">calculableHolderColor</a>,
<a href="#NameConnector" title="">nameConnector</a>,
<a href="#ValueConnector" title="">valueConnector</a>).
</td>
</tr>
<tr class='bgGreen'>
<td> <b>{boolean}</b> animation </td>
<td> Specifies whether the animation will be enabled. Defaults to true. (See
<a href="#Animation" title="">animation</a>, and other related properties like
<a href="#AddDataAnimation" title="">addDataAnimation</a>,
<a href="#AnimationThreshold" title="">animationThreshold</a>,
<a href="#AnimationDuration" title="">animationDuration</a>,
<a href="#animationDurationUpdate" title="">
animationDurationUpdate
</a>
<a href="#AnimationEasing" title="">animationEasing</a>).
</td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> timeline </td>
<td> Timeline (see <a href="#Timeline" title="">timeline</a>), at most one timeline control is allowed in one chart. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> title </td>
<td> Title, (see <a href="#Title" title="">title</a>), at most one title control is allowed in one chart. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> toolbox </td>
<td> Toolbox, (see <a href="#Toolbox" title="">toolbox</a>), at most one toolbox is allowed in one chart. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> tooltip </td>
<td> Tooltip, (see <a href="#Tooltip" title="">tooltip</a>), A small "hover box" with detailed information about the item being hovered over. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> legend </td>
<td> Legend, (see <a href="#Legend" title="">legend</a>), at most one legend is allowed in one single/combination chart. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> dataRange </td>
<td> DataRange, (see <a href="#DataRange" title="">dataRange</a>), data range. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> dataZoom </td>
<td> DataZoom, (see <a href="#DataZoom" title="">dataZoom</a>), data zoom. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> roamController </td>
<td> zoom and roam controller, (see <a href="#RoamController" title="">roamController</a>), use for the map. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Object}</b> grid </td>
<td> A network of regularly spaced lines on a Cartesian coordinate system, (see <a href="#Grid" title="">grid</a>). </td>
</tr>
<tr class='bgRed'>
<td> <b>{Array | Object}</b> xAxis </td>
<td> The horizontal axis array of a two-dimensional plot in Cartesian coordinates, (see <a href="#Xaxis" title="">xAxis</a>), and each item in the array represents one horizontal axis. According to Standard (1.0), at most two horizontal axes are allowed in one chart. </td>
</tr>
<tr class='bgRed'>
<td> <b>{Array | Object}</b> yAxis </td>
<td> The vertical axis array of a two-dimensional plot in Cartesian coordinates, (see <a href="#Yaxis" title="">yAxis</a>), and each item in the array represents one vertical axis. According to Standard (1.0), at most two vertical axes are allowed in one chart. </td>
</tr>
<tr class='bgBlue'>
<td> <b>{Array}</b> series </td>
<td> The data array generated by data-driven chart, (see <a href="#Series" title="">series</a>). Each item in the array stands for a series' options and data. </td>
</tr>
</table>
<h4>timeline<a name="Timeline"> </a></h4>
<P> timeline, at most one timeline control is allowed in one chart. Try <a href="./example/bar11.html#-en" target="_blank">bar »</a>, <a href="./example/scatter4.html#-en" target="_blank">scatter »</a>, <a href="./example/pie7.html#-en" target="_blank">pie »</a>, <a href="./example/map14.html#-en" target="_blank">map »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td>Specifies whether to show timeline. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 4 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string}</b> type </td>
<td> 'time' </td>
<td> When the type is time, interval of the timeline is calculated based on the time span. Can also be: 'number'. </td>
</tr>
<tr>
<td> <b>{boolean}</b> notMerge </td>
<td> false </td>
<td> Whether to merge the options for timeline When called multiple times, same as the second parameter of setOption. (See <a href="#Instance Methods" title="">Instance Methods</a>). </td>
</tr>
<tr>
<td> <b>{boolean}</b> realtime </td>
<td> true </td>
<td> Specifies whether the chart will be displayed in real time when you drag or click the timeline. Default to false (CAN NOT be changed) in the explorer which does't support canvas, such as IE6/7/8.</td>
</tr>
<tr>
<td> <b>{number | string}</b> x </td>
<td> 80 </td>
<td> Set abscissa on the upper left corner of the timeline in px, or in percent (string) such as '50%' (horizontal center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> y </td>
<td> null </td>
<td> Set ordinate on the upper left corner of the timeline in px, or in percent (string). Defaults to null. The position varies with y2, such as '50%' (vertical center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> x2 </td>
<td> 80 </td>
<td> Set abscissa on the lower right corner of the timeline in px, or in percent (string) such as '50%' (horizontal center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> y2 </td>
<td> 0 </td>
<td> Set ordinate on the lower right corner of the timeline in px, or in percent (string) such as '50%' (vertical center of the display area). </td>
</tr>
<tr>
<td> <b>{number}</b> width </td>
<td> adaptive </td>
<td> Width of the timeline, defaults to the total width - x - x2, in px, ignore x2 after specifying width. See the image below.
<br/>Can also be set in percent (string), such as '50%' (half the width of the display area). </td>
</tr>
<tr>
<td> <b>{number}</b> height </td>
<td> 50 </td>
<td> Height of the timeline, in px, or in percent (string) such as '50%' (half the height of the display area). </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> The color of the background. Defaults to transparent. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> The width of the border. </td>
</tr>
<tr>
<td> <b>{color}</b> borderColor </td>
<td> '#ccc' </td>
<td> The color of the border. </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> The inner padding, in px, defaults to 5. Can be set as array - [top, right, bottom, left], same as css, see image below.</td>
</tr>
<tr>
<td> <b>{string}</b> controlPosition </td>
<td> 'left' </td>
<td> The position of play controller. Valid values are: 'left' | 'right' | 'none' </td>
</tr>
<tr>
<td> <b>{boolean}</b> autoPlay </td>
<td> false </td>
<td> Specifies whether to play automatically.</td>
</tr>
<tr>
<td> <b>{boolean}</b> loop </td>
<td> true </td>
<td> Specifies whether to play in a loop.</td>
</tr>
<tr>
<td> <b>{number}</b> playInterval </td>
<td> 2000 </td>
<td> Play time interval, in ms. </td>
</tr>
<tr>
<td> <b>{Object}</b> lineStyle </td>
<td><pre>{
color: '#666',
width: 1,
type: 'dashed'
} </pre></td>
<td> Sets the line style of the timeline, (see <a href="#LineStyle" title="">lineStyle</a>). </td>
</tr>
<tr>
<td> <b>{Object}</b> label </td>
<td><pre>{
show: true,
interval: 'auto',
rotate: 0,
formatter: null,
textStyle: {
color: '#333'
}
} </pre></td>
<td> timeline label text<br/>
<br/>show: specifies whether to show.
<br/>interval: sets interval. Defaults to 'auto'. Valid values are: 'auto' (automatically hide those that cannot be displayed) | 0 (unhide all) | {number}
<br/>rotate: the angle of rotation, defaults to 0 (not rotate). Positive value for counterclockwise rotation, negative value for clockwise rotation. Valid values are: -90 ~ 90
<br/>formatter: interval name formatter: {string} (Template) | {Function}
<br/>textStyle: text style, (see <a href="#TextStyle" title="">textStyle</a>).
</td>
</tr>
<tr>
<td> <b>{Object}</b> checkpointStyle </td>
<td><pre>{
symbol : 'auto',
symbolSize : 'auto',
color : 'auto',
borderColor : 'auto',
borderWidth : 'auto',
label: {
show: false,
textStyle: {
color: 'auto'
}
}
} </pre></td>
<td> timeline checkpoint<br/>
<br/>symbol: symbol of the checkpoint, defaults to the symbol on timeline.
<br/>symbolSize: size of the checkpoint symbol, defaults to the size of symbol on timeline.
<br/>color: color of the checkpoint symbol, defaults to the color of the checkpoint. A specific color can be specified; If unspecified, defaults to '#1e90ff'.
<br/>borderColor: the color of the checkpoint symbol border.
<br/>borderWidth: the width of the checkpoint symbol border.
<br/>label: see above.
</td>
</tr>
<tr>
<td> <b>{Object}</b> controlStyle </td>
<td><pre>{
itemSize: 15,
itemGap: 5,
normal : {
color : '#333'
},
emphasis : {
color : '#1e90ff'
}
} </pre></td>
<td> the style of timeline controller. ItemSize, itemGap and both normal and highlight color can be specified.
</td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> 'emptyDiamond'</td>
<td> the symbol for timeline tick, same as serie.symbol. </td>
</tr>
<tr>
<td> <b>{number}</b> symbolSize </td>
<td> 4 </td>
<td> size of the symbol for timeline tick, same as serie.symbolSize. </td>
</tr>
<tr>
<td> <b>{number}</b> currentIndex </td>
<td> 0 </td>
<td> The current index position, corresponding to options array, used to display a specific series. </td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> timeline list, also the timeline label content. </td>
</tr>
</table>
<p><img src="./asset/img/doc/timeline.png" title="" alt="timeline"/></P>
<h4>title<a name="Title"> </a></h4>
<P> title. In one chart, at most one title control is allowed, which can be devided into title and subtitle. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td>Specifies whether to show timeline. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 6 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string}</b> text </td>
<td> '' </td>
<td> title text, '\n' represents a line feed. </td>
</tr>
<tr>
<td> <b>{string}</b> link </td>
<td> '' </td>
<td> title text hyperlink. </td>
</tr>
<tr>
<td> <b>{string}</b> target </td>
<td> null </td>
<td> Specifies a window to open the title hyperlink. Can be one of 'self' | 'blank'. If unspecified, equal to 'blank' (a new window). </td>
</tr>
<tr>
<td> <b>{string}</b> subtext </td>
<td> '' </td>
<td> subtitle text, '\n' represents a line feed. </td>
</tr>
<tr>
<td> <b>{string}</b> sublink </td>
<td> '' </td>
<td> subtitle text hyperlink. </td>
</tr>
<tr>
<td> <b>{string}</b> subtarget </td>
<td> null </td>
<td> Specifies a window to open the subtitle hyperlink. Can be one of 'self' | 'blank'. If unspecified, equal to 'blank' (a new window). </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'left' </td>
<td> horizontal position. Defaults to left. Valid values are: 'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'top' </td>
<td> vertical position. Defaults to top. Valid values are: 'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string}</b> textAlign </td>
<td> null </td>
<td> horizontal alignment. It is further determined by the x option by default. Valid values are: left' | 'right' | 'center. </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> The color of the title's background. Defaults to transparent. </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#ccc' </td>
<td> The color of the drawn border around the title. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> The width of the drawn border around the title, in px, defaults to 0 (no border). </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> The inner padding of the title, in px, defaults to 5. Can be set as array - [top, right, bottom, left], same as css, see image below. </td>
</tr>
<tr>
<td> <b>{number}</b> itemGap </td>
<td> 5 </td>
<td> The vertical gap between each item in the title/subtitle, in px, defaults to 10. </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td><pre>{
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
} </pre></td>
<td> the style of title text, (see <a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
<tr>
<td> <b>{Object}</b> subtextStyle </td>
<td><pre>{
color: '#aaa'
} </pre> </td>
<td> the style of subtitle text, (see <a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
</table>
<p><img src="./asset/img/doc/title.png" title="" alt="title"/></P>
<h4>toolbox<a name="Toolbox"> </a></h4>
<P> Toolbox, at most one toolbox is allowed in one chart. <a href="example/toolbox.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> false </td>
<td> Specifies whether to show toolbox. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 6 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string}</b> orient </td>
<td> 'horizontal' </td>
<td> layout manner. Defaults to horizontal. Valid values are: 'horizontal' | 'vertical'. </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'right' </td>
<td> horizontal position. Defaults to center. Valid values are: 'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'top' </td>
<td> vertical position. Defaults to top. Valid values are: 'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> The color of the toolbox's background. Defaults to transparent. </td>
</tr>
<tr>
<td> <b>{color}</b> borderColor </td>
<td> '#ccc' </td>
<td> The color of the drawn border around the toolbox. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> The width of the drawn border around the toolbox, in px, defaults to 0 (no border). </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> The inner padding of the toolbox, in px, defaults to 5. Can be set as array - [top, right, bottom, left], same as css, see image below. </td>
</tr>
<tr>
<td> <b>{number}</b> itemGap </td>
<td> 10 </td>
<td> The pixel gap between each item. Defaults to 10. It is horizontal in a toolbox with horizontal layout, and vertical in a toolbox with vertical layout. See image below. </td>
</tr>
<tr>
<td> <b>{number}</b> itemSize </td>
<td> 16 </td>
<td> the size of toolbox icon, in px. </td>
</tr>
<tr>
<td> <b>{Array &lt;color&gt;}</b> color </td>
<td> ['#1e90ff','#22bb22','#4b0082','#d2691e'] </td>
<td> An array containing the default colors for the toolbox's icons. When all colors are used, new colors are pulled from the start again. Default colors can also be set on specific features. </td>
</tr>
<tr>
<td> <b>{color}</b> disableColor </td>
<td> '#ddd' </td>
<td> Specifies the disable color.</td>
</tr>
<tr>
<td> <b>{color}</b> effectiveColor </td>
<td> 'red' </td>
<td> Specifies the effective color.</td>
</tr>
<tr>
<td> <b>{boolean}</b> showTitle </td>
<td> true </td>
<td> Specifies whether the toolbox text will be showed. Defaults to true.</td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> {} </td>
<td> the style of toolbox text, (See <a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
<tr>
<td> <b>{Object}</b> feature </td>
<td><pre>{
mark : {
show : false,
title : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线'
},
lineStyle : {
width : 2,
color : '#1e90ff',
type : 'dashed'
}
},
dataZoom : {
show : false,
title : {
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退'
}
},
dataView : {
show : false,
title : '数据视图',
readOnly: false,
lang: ['数据视图', '关闭', '刷新']
},
magicType: {
show : false,
title : {
line : '折线图切换',
bar : '柱形图切换',
stack : '堆积',
tiled : '平铺',
force: '力导向布局图切换',
chord: '和弦图切换',
pie: '饼图切换',
funnel: '漏斗图切换'
},
option: {
// line: {...},
// bar: {...},
// stack: {...},
// tiled: {...},
// force: {...},
// chord: {...},
// pie: {...},
// funnel: {...}
},
type : []
},
restore : {
show : false,
title : '还原'
},
saveAsImage : {
show : false,
title : '保存为图片',
type : 'png',
lang : ['点击保存']
}
}
</pre></td>
<td> Currently toolbox supports all the features listed below. For custom features, <a href="example/toolbox.html#-en" target="_blank"> try this »</a>
<p><img src="./asset/img/doc/toolbox.png" title="" alt="toolbox"/></P>
<ul>
<li>
mark: markLine icons. In the picture above, the first, second, and third icons from the left respectively represent markLine switch, undo markLine, and clear markLine. You can set more properties.
<ul>
<li>lineStyle (see <a href="#LineStyle" title="">lineStyle</a>) can be passed in to set styles for markLine. </li>
</ul>
</li><br/>
<li>
dataZoom: dataZoom icons. Automatically synchronized with the dataZoom control. In the picture above, the fourth and fifth icons from the left respectively represent data zoom and data zoom reset.
</li><br/>
<li>
dataView: dataView icon. In the picture above, the third icon from the right represents dataView, where You can set more properties.
<ul>
<li><b>{boolean=}</b> readOnly: dataView is set to read-only by default. It can be edited when readOnly is false. </li>
<li><b>{Function=}</b> optionToContent: custom display content of dataView. </li>
<li><b>{Function=}</b> contentToOption: When the readOnly of dataView is set to false, the refresh button will appear. You can set the content and the way to display it yourself if you want. </li>
<li><b>{Array=}</b> lang: DataView has three default texts: ['Data View', 'close', 'refresh'], you can change it if you want. </li>
</ul>
</li><br/>
<li>
magicType: magicType icons. So far magicType supports switch between bar and line, stack and tile. In the picture above, the sixth, seventh, eighth and ninth icons from the left respectively represent switch to stack, tile, line, bar, force, chord, pie and funnel.
<ul>
<li><b>{Array}</b> type ['line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel'] </li>
<li><b>{Object=}</b> option. Series' option can be dynamically changed at the time of magic switch.</li>
</ul>
</li><br/>
<li>
restore: restore icon. In the picture above, the second icon from the right represents restore the chart.
</li><br/>
<li>
saveAsImage: saveAsImage icon. In the picture above, the first icon from the right represents save as image(not supported on IE8-), where You can set more properties.
<ul>
<li><b>{string=}</b> type: the default type to save image is 'png', change it to 'jpeg'. </li>
<li><b>{string=}</b> name: specifies name of the image. If unspecified, use the chart title. If there is no title, defaults to “ECharts”. </li>
<li><b>{string=}</b> lang: you can click to save it in non-IE browsers. Save text is supported. Defaults to “click Save”, can be changed. </li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<h4>tooltip<a name="Tooltip"> </a></h4>
<P> Tooltip, a small "hover box" with detailed information about the item being hovered over. <a href="example/tooltip.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td>Specifies whether to show tooltip. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 1 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 8 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{boolean}</b> showContent </td>
<td> true </td>
<td> Specifies whether to show the content of tooltip. Set it to false when you just need the tooltip to trigger events or show axisPointer. <br/>. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{string}</b> trigger </td>
<td> 'item' </td>
<td> Type of trigger. Defaults to 'item'. See image below. Valid values are: 'item' | 'axis'. </td>
</tr>
<tr>
<td> <b>{Array | Function}</b> position </td>
<td> null </td>
<td> Specifies position, pass in <b>{Array}</b>, like [x, y], fixed position [x, y]; pass in <b>{Function}</b>, like function([x, y]) {return [newX,newY]}. The default displayed coordinates are input parameters, the new user-specified coordinates are output return values.
</td>
</tr>
<tr>
<td> <b>{string | Function}</b> formatter </td>
<td> null </td>
<td> content formatter: <b>{string}</b> (Template) | <b>{Function}</b>. Supports asynchronous callback. See below. </td>
</tr>
<tr>
<td> <b>{string | Function}</b> islandFormatter </td>
<td> '{a} &lt; br/&gt;{b} : {c}' </td>
<td> island content formatter. For Drag-Recalculate only: <b>{string}</b> (Template) | <b>{Function}</b>. See below. </td>
</tr>
<tr>
<td> <b>{number}</b> showDelay </td>
<td> 20 </td>
<td> The number of milliseconds to wait until the tooltip is shown when the mouse moves across a point or chart. Placing a delay on a tooltip before it is displayed can prevent frequent switch, especially when the tooltip text is requested asynchronously. </td>
</tr>
<tr>
<td> <b>{number}</b> hideDelay </td>
<td> 100 </td>
<td> The number of milliseconds to wait until the tooltip is hidden when mouse out from a point or chart. </td>
</tr>
<tr>
<td> <b>{number}</b> transitionDuration </td>
<td> 0.4 </td>
<td> The duration in seconds of the animated transition. If you want the tooltip to follow the mouse as it moves across a point or chart, setting showDelay to 0 is the key, but setting transitionDuration to 0 can also make a difference in interactive experiences. </td>
</tr>
<tr>
<td> <b>{boolean}</b> enterable </td>
<td> false </td>
<td> Specifies whether to let the mouse go into the tip dom, default to false. Let it be true if you need interaction like link | button etc. </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0.7)' </td>
<td> The background color for the tooltip. Defaults to a black color (opacity to 30%). </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#333' </td>
<td> The color of the tooltip border. </td>
</tr>
<tr>
<td> <b>{number}</b> borderRadius </td>
<td> 4 </td>
<td> The radius of the rounded border corners, in px, defaults to 4. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> The pixel width of the tooltip border, defaults to 0 (no border). </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> The inner padding of the tooltip, in px, defaults to 5. Can be set as array - [top, right, bottom, left], same as css. </td>
</tr>
<tr>
<td> <b>{Object}</b> axisPointer </td>
<td><pre>{
type: 'line',
lineStyle: {
color: '#48b',
width: 2,
type: 'solid'
},
crossStyle: {
color: '#1e90ff',
width: 1,
type: 'dashed'
},
shadowStyle: {
color: 'rgba(150,150,150,0.3)',
width: 'auto',
type: 'default'
}
} </pre></td>
<td> axis pointer, triggered by axis. Default type is line. Valid types are: 'line' | 'cross' | 'shadow' | 'none'. Each type has its corresponding style, see below.
<br/>lineStyle: style for line pointer, (see <a href="#LineStyle" title="">lineStyle</a>),
<br/>crossStyle: style for crosshairs pointer, (see <a href="#LineStyle" title="">lineStyle</a>),
<br/>shadowStyle: style for shadow pointer, (see <a href="#AreaStyle" title="">areaStyle</a>, areaStyle. Size is set to 'auto' by default. Width can be specified. </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> { color:'#fff' } </td>
<td> style for the tooltip text. Defaults to white, (see <a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
</table>
<P> content formatter：<a href="example/tooltip.html#-en" target="_blank">Try this »</a></P>
<ul>
<li>
<b>{string}</b>, Template, its variables are:
<ul>
<li>{a} | {a0}</li>
<li>{b} | {b0}</li>
<li>{c} | {c0}</li>
<li>{d} | {d0} (some chart types do not have this variable)</li>
<li>{e} | {e0} (some chart types do not have this variable)</li>
<li> If there are multiple sets of data, there will be multiple sets of varaibles accordingly, like {a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...</li>
<li> Here are what variable a, b, c and d reprensent in different chart types:
<ul>
<li><b>line &amp; area</b>, <b>column &amp; bar, <b>candlestick</b></b>: a (series name), b(category value), c (value), d(null)</li>
<li><b>scatter &amp; bubble</b>: a (series name), b (data name), c (value array), d(null)</li>
<li><b>map</b>: a (series name), b (area name), c(merged value), d(null)</li>
<li><b>pie</b>, <b>radar</b>, <b>gauge</b>, <b>funnel</b>: a (series name), b (data item name)，c(value), d (pie: percent | radar: indicator name) </li>
<li><b>force, chord</b> :
<ul>
<li>node : a (series name)，b (node name)，c (node value), d (node index), e</li>
<li>link : a (series name)，b (link name, default bigEndNodeName-smallEndNodeName)，c(link.value), d(name or index of big end node), e(name or index of small end node)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<b>{Function}</b>, the list of parameters passed in is [params, ticket, callback], detail as follows:
<ul>
<li>&lt;Array&gt; params : array content and template varaibles are the same<pre>[
{
seriesIndex: 0,
seriesName: 'Sales',
name: 'Monday',
dataIndex: 0,
data: data,
name: name,
value: value,
percent: special, // pie
indicator: special, // radar, force, chord
value2: special2, // force, chord
indicator2: special2 // force, chord
},
{..},
...
]
</pre></li>
<li>&lt;String&gt; ticket: asynchronous callback marker</li>
<li>&lt;Function&gt; callback: asynchronous callback, the callback needs two parameters, the first one is the ticket that we mentioned earlier, the second is the fill content html. </li>
<li><i>* When the function callbacks, 'this' pointer points to the current chart instance (myChart). </i></li>
</ul>
</li>
</ul>
<P> trigger type: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> item trigger </th>
<th> axis trigger </th>
</tr>
<tr>
<td style="text-align:center"><img src="./asset/img/doc/tooltip1.jpg" title="" alt="item trigger"/></td>
<td style="text-align:center"><img src="./asset/img/doc/tooltip2.jpg" title="" alt="axis trigger"/></td>
</tr>
</table>
<h4>legend<a name="Legend"> </a></h4>
<P> legend, at most one legend is allowed in one chart. <a href="example/legend.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td>Specifies whether to show. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 4 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string}</b> orient </td>
<td> 'horizontal' </td>
<td> layout manner, defaults to horizontal. Valid values are: 'horizontal' | 'vertical'. </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'center' </td>
<td> horizontal position. Defaults to center. Valid values are: 'center' | 'left' | 'right' | <b>{number}</b>}(x-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'top' </td>
<td> vertical position. Defaults to top. Valid values are: 'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> The color of the legend's background. Defaults to transparent. </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#ccc' </td>
<td> The color of the drawn border around the legend. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> The width of the drawn border around the legend, in px, defaults to 0 (no border). </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> The inner padding of the legend, in px, defaults to 5. Can be set as array - [top, right, bottom, left], same as css, see image below. </td>
</tr>
<tr>
<td> <b>{number}</b> itemGap </td>
<td> 10 </td>
<td> The pixel gap between each item. Defaults to 10. It is horizontal in a legend with horizontal layout, and vertical in a legend with vertical layout. See image below. </td>
</tr>
<tr>
<td> <b>{number}</b> itemWidth </td>
<td> 20 </td>
<td> Legend shape's width. </td>
</tr>
<tr>
<td> <b>{number}</b> itemHeight </td>
<td> 14 </td>
<td> Legend shape's height. </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> {color: '#333'} </td>
<td> We only set the default color of legend text, (see <a href="#TextStyle" title="">textStyle</a>). If you want the legend text to take the color of the legend, you can set color to 'auto'. </td>
</tr>
<tr>
<td> <b>{string | Function}</b> formatter </td>
<td> null </td>
<td> text formatter: <b>{string}</b> (Template) | <b>{Function}</b>, template variable is '{name}', function paramater is name. </td>
</tr>
<tr>
<td> <b>{boolean | string}</b> selectedMode </td>
<td> true </td>
<td> selection mode. Enable legend switch by default. Can be one of: single, multiple </td>
</tr>
<tr>
<td> <b>{Object}</b> selected </td>
<td> null </td>
<td> The default selected state, can be used to conduct dynamic data loading with LEGEND.SELECTED event, <a href="example/legend.html#-en" target="_blank">try this »</a> </td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [ ] </td>
<td> legend content array, the array items are usually <b>{string}</b>, each item represents a series name, auto line break in layout, but you can specify a '' for a new line break.
<br/>Use the value to index the chart type and itemStyle used by series with the same name in <a href="#Series" title="">series</a>. If fails, the item will be in not enabled state by default.
<br/>If you need custom legend text style, you can change the array item to <b>{Object}</b>. With text style and custom icon, the format is:
<br/>{<br/>&nbsp;&nbsp;name : <b>{string}</b>, <br/>&nbsp;&nbsp;textStyle : <b>{Object}</b>, <br/>&nbsp;&nbsp;icon : <b>{string}</b><br/>}
</td>
</tr>
</table>
<p><img src="./asset/img/doc/legend.png" title="" alt="legend"/></P>
<h4>dataRange<a name="DataRange"> </a></h4>
<P> dataRange, at most one dataRange control is allowed in one chart. <a href="example/dataRange.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td>Specifies whether to show. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 4 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string}</b> orient </td>
<td> 'vertical' </td>
<td> layout manner. Defaults to vertical. Valid values are: 'horizontal' | 'vertical' </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'left' </td>
<td> horizontal position. Defaults to left. Valid values are: 'center' | 'left' | 'right' | <b>{number}</b>}(x-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'bottom' </td>
<td> vertical position. Defaults to bottom. Valid values are: 'top' | 'bottom' | 'center' | <b>{number}</b>(y-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> The color of the dataRange's background. Defaults to transparent. </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#ccc' </td>
<td> The color of the drawn border around the dataRange. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> The width of the drawn border around the dataRange, in px, defaults to 0 (no border). </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> The inner padding of the dataRange, in px, defaults to 5. Can be set as array - [top, right, bottom, left], same as css, see image below. </td>
</tr>
<tr>
<td> <b>{number}</b> itemGap </td>
<td> 10 </td>
<td> The pixel gap between each item. Defaults to 10. It is horizontal in the dataRange with horizontal layout, and vertical in the dataRange with vertical layout. See image below. </td>
</tr>
<tr>
<td> <b>{number}</b> itemWidth </td>
<td> 20 </td>
<td> The width of dataRange item. </td>
</tr>
<tr>
<td> <b>{number}</b> itemHeight </td>
<td> 14 </td>
<td> The width of dataRange item. </td
</tr>
<tr>
<td> <b>{number}</b> min </td>
<td> null </td>
<td> The specified minimum value, such as 0. Defaults to null. Required parameter. Only when splitList is used, min can be ignored.</td>
</tr>
<tr>
<td> <b>{number}</b> max </td>
<td> null </td>
<td> The specified maximum value, such as 100. Defaults to null. Required parameter. Only when splitList is used, max can be ignored.</td>
</tr>
<tr>
<td> <b>{number}</b> precision </td>
<td> 0 </td>
<td> Decimal precision. Defaults to 0 (no decimal point). If the value of max - min is not divisible by splitNumber in the existing precision, the precision will be automatically increased for the sake of exact division. Inexact division is not supported. </td>
</tr>
<tr>
<td> <b>{number}</b> splitNumber </td>
<td> 5 </td>
<td> the number of segments. Defaults to 5. Linear gradient when set to 0. When calculable is true, it is equally split into 100 parts by default. </td>
</tr>
<tr>
<td> <b>{Array.&lt;Object&gt;}</b> splitList </td>
<td> null </td>
<td>
Customizing that how to split dataRange. When splitList is specified, splitNumber is ignored. <br />
splitList is an Array, which can not be empty. Each item of the Array is Object like: <br />
{ <br />
&nbsp;&nbsp;start: 10 &nbsp;&nbsp;&nbsp; The start of the domain of this item. <br />
&nbsp;&nbsp;end: 30 &nbsp;&nbsp;&nbsp; The end of the domain of this item. <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'start' and 'end' can be set to the same value, <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; in which case this item is coresponding to the single value rather than an interval. <br />
&nbsp;&nbsp;label: '10 to 30' &nbsp;&nbsp;&nbsp; text label of this item. If ignoring this attribute, Text label will be auto generated. <br />
&nbsp;&nbsp;color: '#333' &nbsp;&nbsp;&nbsp; Color of this item. If ignoring attribute, color can be auto generated. <br />
} <br />
example: <a href="./example/dataRange2.html" target="_blank">this 》</a>
</td>
</tr>
<tr>
<td> <b>{Object}</b> range </td>
<td> null </td>
<td>
This option is used to set the initial selected range of dataRange. This option works when "calculable" is true. <br />
The value of this option likes: {start: 10, end: 50}
</td>
</tr>
<tr>
<td> <b>{boolean | string}</b> selectedMode </td>
<td> true </td>
<td> selection mode. Enable dataRange switch by default. Can be one of: single, multiple </td>
</tr>
<tr>
<td> <b>{boolean}</b> calculable </td>
<td> false </td>
<td> Specifies whether the scale roaming feature will be enabled. When enabled, ignore splitNumber and splitList, dataRange shows as linear gradient. </td>
</tr>
<tr>
<td> <b>{boolean}</b> hoverLink </td>
<td> true </td>
<td> Hover link with the map.</td>
</tr>
<tr>
<td> <b>{boolean}</b> realtime </td>
<td> true </td>
<td> Specifies whether the scale roaming feature will be displayed in real time. Default to false (CAN NOT be changed) in the explorer which does't support canvas, such as IE6/7/8.</td>
</tr>
<tr>
<td> <b>{Array}</b> color </td>
<td> ['#1e90ff','#f0ffff'] </td>
<td> color list of the dataRange. Length of the color array must be > = 2. The color shows the change from high value to low value; that is, the low color array represents the high value color. Alpha ( rgba ) is supported.</td>
</tr>
<tr>
<td> <b>{string | Function}</b> formatter </td>
<td> null </td>
<td> content formatter：<b>{string}</b> (Template) | <b>{Function}</b>, the template's variables are {value}' and '{value2}', which stand for start value ​​and end value. There are two function parameters, whose meanings are the same as template variables. One parameter '{value}' only when calculable is true. <a href="example/dataRange.html#-en" target="_blank">Try this »</a></td>
</tr>
<tr>
<td> <b>{Array}</b> text </td>
<td> null </td>
<td> text of the dataRange, when splitNumber is valid, defaults to the calculated value. You can specify a text array with the length of 2 to show the brief dataRange text, like ['high', 'low']. '\n' represents a line feed. </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> {color: '#333'} </td>
<td> We only set the default color of dataRange text, (see<a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
</table>
<p><img src="./asset/img/doc/dataRange.png" title="" alt="dataRange"/></P>
<h4>dataZoom<a name="DataZoom"> </a></h4>
<P> dataZoom. Synchronized with toolbox.feature.dataZoom. Applicable to Cartesian chart only. <a href="example/dataZoom.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 4 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> false </td>
<td> Specifies whether to show dataZoom. If true, take over all the series of data using specified category axis. If unspecified, take over all the Cartesian coordinate system data. </td>
</tr>
<tr>
<td> <b>{string}</b> orient </td>
<td> 'horizontal' </td>
<td> layout manner, defaults to horizontal. Valid values are: 'horizontal' | 'vertical'. </td>
</tr>
<tr>
<td> <b>{number}</b> x </td>
<td> adaptive </td>
<td> Horizontal placement. By default it is adapted according to the grid's parameters. Vertical layout is left by default, can be specified. <b>{number}</b> (the x-coordinate, in pixels, of the upper-left corner.) </td>
</tr>
<tr>
<td> <b>{number}</b> y </td>
<td> adaptive </td>
<td> Vertical placement. By default it is adapted according to the grid's parameters. Vertical layout is bottom by default, can be specified. <b>{number}</b> (the y-coordinate, in pixels, of the upper-left corner.) </td>
</tr>
<tr>
<td> <b>{number}</b> width </td>
<td> adaptive | 30</td>
<td> Specifies width. In honrizontal layout, it is adapted according to the grid's parameters by default. In vertical layout, defaults to 30, can be specified. <b>{number}</b> (width, in px) </td>
</tr>
<tr>
<td> <b>{number}</b> height </td>
<td> adaptive | 30</td>
<td> Specifies height. In vertical layout, it is adapted according to the grid's parameters by default. In honrizontal layout, defaults to 30, can be specified. <b>{number}</b> (height, in px) </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> The color of the background. Defaults to transparent. </td>
</tr>
<tr>
<td> <b>{color}</b> dataBackgroundColor </td>
<td> '#eee' </td>
<td> The color of the dataZoom's background. Only the first series would be rendered as data background.</td>
</tr>
<tr>
<td> <b>{color}</b> fillerColor </td>
<td> 'rgba(144,197,237,0.2)' </td>
<td> The fill color of the selected area. </td>
</tr>
<tr>
<td> <b>{color}</b> handleColor </td>
<td> 'rgba(70,130,180,0.8)' </td>
<td> The color of the control handle. </td>
</tr>
<tr>
<td> <b>{number}</b> handleSize </td>
<td> 8</td>
<td> The size of the control handle. </td>
</tr>
<tr>
<td> <b>{Array | number}</b> xAxisIndex </td>
<td> null </td>
<td> If unspecified, it controls by default all the x-axes. You can use array to specify multiple x-axes Index that needs to be controlled, and number to specify one x-axis Index that needs to be controlled. </td>
</tr>
<tr>
<td> <b>{Array | number}</b> yAxisIndex </td>
<td> null </td>
<td> If unspecified, it controls by default all the y-axes. You can use array to specify multiple y-axes Index that needs to be controlled, and number to specify one y-axis Index that needs to be controlled. </td>
</tr>
<tr>
<td> <b>{number}</b> start </td>
<td> 0 </td>
<td> The start percent of dataZoom. Defaults to 0 (%), starts with the first data. </td>
</tr>
<tr>
<td> <b>{number}</b> end </td>
<td> 100 </td>
<td> The end percent of dataZoom. Defaults to 100 (%), ends with the last data. </td>
</tr>
<tr>
<td> <b>{boolean}</b> showDetail </td>
<td> true </td>
<td> Show detail when dragging. </td>
</tr>
<tr>
<td> <b>{boolean}</b> realtime </td>
<td> false </td>
<td> Specifies whether dataZoom will be displayed in real time. It is suggested to disable the realtime effect when your browser is slow or data sets are large and complex. Default to false (CAN NOT be changed) in the explorer which does't support canvas, such as IE6/7/8.</td>
</tr>
<tr>
<td> <b>{boolean}</b> zoomLock </td>
<td> false </td>
<td> DataZoom lock. Defaults to false. When set to true, the selected area cannot be zoomed, i.e. (end - start) value remains unchanged; only data roaming is applicable. </td>
</tr>
</table>
<p><img src="./asset/img/doc/dataZoom.png" title="" alt="dataZoom"/></P>
<h4>roamController<a name="RoamController"> </a></h4>
<P> Zoom and roam controller for the map. <a href="example/map1.html#-en" target="_blank">try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td>Specifies whether to show. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 4 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'left' </td>
<td> horizontal position. Defaults to left. Valid values are: 'center' | 'left' | 'right' | {number}(x-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'top' </td>
<td> vertical position. Defaults to top. Valid values are: 'top' | 'bottom' | 'center' | {number}(y-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{number}</b> width </td>
<td> 80</td>
<td> Specifies width which also define the size of the roam disk, can be <b>{number}</b>(in px) </td>
</tr>
<tr>
<td> <b>{number}</b> height </td>
<td> 120</td>
<td> Specifies height of the whold controller boundary box, the zoom button would be placed at the bottom, can be <b>{number}</b>(in px) </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> The color of the background. Defaults to transparent. </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> '#ccc' </td>
<td> Color of the border. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 0 </td>
<td> Width of the border. </td>
</tr>
<tr>
<td> <b>{number | Array}</b> padding </td>
<td> 5 </td>
<td> The inner padding, in px, defaults to 5. Can be set as array - [top, right, bottom, left], same as css, see image below. </td>
</tr>
<tr>
<td> <b>{color}</b> fillerColor </td>
<td> '#fff' </td>
<td> The fill color of the text in the controller.</td>
</tr>
<tr>
<td> <b>{color}</b> handleColor </td>
<td> '#6495ed' </td>
<td> The main color of the control handle.</td>
</tr>
<tr>
<td> <b>{number}</b> step </td>
<td> 15 </td>
<td> moving step of the 4 direction roam in px</td>
</tr>
<tr>
<td> <b>{Object}</b> mapTypeControl </td>
<td> null </td>
<td> Required. Specifies the mapType which should be under control, as: { china: true }<br/>You can specify every single mapType when multiple map in a chart at the same time, such as: { china: false, world: true} </td>
</tr>
</table>
<p><img src="./asset/img/doc/roamController.png" title="" alt="roamController"/></P>
<h4>grid<a name="Grid"> </a></h4>
<P> A network of regularly spaced lines on a Cartesian coordinate system. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 0 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{number | string}</b> x </td>
<td> 80 </td>
<td> Set abscissa on the upper left corner of the grid in px, or in percent (string) such as '50%' (horizontal center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> y </td>
<td> 60 </td>
<td> Set ordinate on the upper left corner of the grid in px, or in percent (string). Defaults to null. The position varies with y2, such as '50%' (vertical center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> x2 </td>
<td> 80 </td>
<td> Set abscissa on the lower right corner of the grid in px, or in percent (string) such as '50%' (horizontal center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> y2 </td>
<td> 60 </td>
<td> Set ordinate on the lower right corner of the grid in px, or in percent (string) such as '50%' (vertical center of the display area). </td>
</tr>
<tr>
<td> <b>{number}</b> width </td>
<td> adaptive </td>
<td> Width of the grid (without axes), defaults to the total width - x - x2, in px, ignore x2 after specifying width. See the image below.
<br/>Can also be set in percent (string), such as '50%' (half the width of the display area). </td>
</tr>
<tr>
<td> <b>{number}</b> height </td>
<td> adaptive </td>
<td> Height of the grid (without axes), defaults to the total height - y - y2, in px, ignore y2 after specifying height. See the image below.
<br/>Can also be set in percent (string), such as '50%' (half the height of the display area). </td>
</tr>
<tr>
<td> <b>{color}</b> backgroundColor </td>
<td> 'rgba(0,0,0,0)' </td>
<td> Background color, defaults to transparent. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 1 </td>
<td> Width of the border. </td>
</tr>
<tr>
<td> <b>{color}</b> borderColor </td>
<td> '#ccc' </td>
<td> Color of the border. </td>
</tr>
</table>
<p><img src="./asset/img/doc/grid.jpg" title="" alt="grid"/></P>
<h4>xAxis<a name="Xaxis"> </a></h4>
<P>The horizontal axis array in Cartesian coordinates. Each item in the array stands for a horizontal axis, and the array can be omitted if there is only one horizontal axis. In one chart, at most two horizontal axes are allowed. If there is only one x-axis, you can place it either at the bottom (by default) or at the top of the <a href="#Grid" title="">grid</a>. If there are two x-axes, they shall be placed in opposition to each other. By default, the first x-axis is placed at the bottom of the grid, and the second at the top. </p>
<p>There are three types of coordinate axes: category axis, value axis and time axis (the differences are given in <a href="#Axis" title="">axis</a>). For most chart types x-axis is category axis, but for bar chart x-axis is value axis, and for scatter chart both x-axis and y-axis are value axes. For specific parameters, see <a href="#Axis" title="">axis</a>. </P>
<h4>yAxis<a name="Yaxis"> </a></h4>
<P>The vertical axis array in Cartesian coordinates. Each item in the array stands for a vertical axis, and the array can be omitted if there is only one vertical axis. In one chart, at most two vertical axes are allowed. If there is only one y-axis, you can place it either on the left (by default) or on the right of the <a href="#Grid" title="">grid</a>. If there are two y-axes, they shall be placed in opposition to each other. By default, the first y-axis is placed on the left of the grid, and the second on the right. </p>
<p>There are three types of coordinate axes: category axis, value axis and time axis (the differences are given in <a href="#Axis" title="">axis</a>). For most chart types y-axis is value axis, but for bar chart y-axis is category axis. For specific parameters, see <a href="#Axis" title="">axis</a>. </P>
<h4>axis<a name="Axis"> </a><a name="CategoryAxis"> </a><a name="ValueAxis"> </a></h4>
<P> There are three types of coordinate axes: category axis, value axis and time axis. Their differences are: </P>
<ul>
<li>category axis: specifies the category list. The only axis that the data is organized by. </li>
<li>value axis: specifies the valid values. The only axis where the values are placed. </li>
<li>time axis: use the same as value axis. The only difference is time axis treat the data as time (date) and auto formate the value into different time granularity along with different time span.</li>
</ul>
<P> Here are the options for coordinate axes. Some options are applicable to category axis only, while others to value axis only. Please heed the type of application. <a href="example/axis.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> type </td>
<td> 'category' | 'value' | 'time' | 'log' </td>
<td> universal </td>
<td> type of the coordinate axis. By default, x-axis is 'category', y-axis is 'value'. </td>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td> universal </td>
<td>Specifies whether to show axis. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> universal </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 0 </td>
<td> universal </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string}</b> position </td>
<td> 'bottom' | 'left' </td>
<td> universal </td>
<td> position of the coordinate axis. For x-axis ('category'), defaults to 'bottom'. For y-axis ('value'), defaults to 'left'. Valid values are: 'bottom' | 'top' | 'left' | 'right'. </td>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td> '' </td>
<td> value | time </td>
<td> name of the value axis. Defaults to null. </td>
</tr>
<tr>
<td> <b>{string}</b> nameLocation </td>
<td> 'end' </td>
<td> value | time </td>
<td> name location of the value axis. Defaults to 'end'. Valid values are: 'start' | 'end'. </td>
</tr>
<tr>
<td> <b>{Object}</b> nameTextStyle </td>
<td> {} </td>
<td> value | time </td>
<td> text style for the name of the value axis. Defaults to global options, takes the main color of axisLine. Can be specified. </td>
</tr>
<tr>
<td> <b>{boolean}</b> boundaryGap </td>
<td> true </td>
<td> category </td>
<td> blank border on each side of the cetegory axis. See image below. If true (by default), leaves it to blank; If false, extends to the edge of the grid. </td>
</tr>
<tr>
<td> <b>{Array}</b> boundaryGap </td>
<td> [0, 0] </td>
<td> value | time </td>
<td> blank border on each side of the axis. the value within the array represents percentage, [the difference between the original minimum value and the final minimum value, the difference between the original maximum value and the final maximum value]. </td>
</tr>
<tr>
<td> <b>{number}</b> min </td>
<td> null </td>
<td> value | time </td>
<td> The pecified minimum value, such as 0. Defaults to null. Further determined by specific values. Ignores boundaryGap[0] when specified. </td>
</tr>
<tr>
<td> <b>{number}</b> max </td>
<td> null </td>
<td> value | time </td>
<td> The pecified maximum value, such as 100. Defaults to null. Further determined by specific values. Ignores boundaryGap[1] when specified. </td>
</tr>
<tr>
<td> <b>{boolean}</b> scale </td>
<td> false </td>
<td> value | time </td>
<td> If false, the value axis must start with 0. If true, you can set the minimum and maximum value of value axis as the starting and ending value of your value axis. </td>
</tr>
<tr>
<td> <b>{number}</b> splitNumber </td>
<td> null </td>
<td> value | time </td>
<td> Number of segments, defaults to auto split along with the min/max.</td>
</tr>
<tr>
<td> <b>{Object}</b> logPositive </td>
<td> null </td>
<td> value </td>
<td> This option works when axis.type === 'log'. If set to false, negative value is supported. It is self-adapting by default, which means that if all of the data is negative, logPositive will be set to false, otherwise true. </td>
</tr>
<tr>
<td> <b>{number}</b> logLabelBase </td>
<td> null </td>
<td> value </td>
<td> This option works when axis.type === 'log'. If specified, axisLabel is drawn as exponent style. For example, when logLabelBase = 4, axisLabel is drawn like 4², 4³. If not specified, axisLabel is drawn like 1,000,000 as usual. </td>
</tr>
<tr>
<td> <b>{Object}</b> axisLine </td>
<td> varying </td>
<td> universal </td>
<td> Axis line. Default to show. See below.</td>
</tr>
<tr>
<td> <b>{Object}</b> axisTick </td>
<td> varying </td>
<td> universal </td>
<td> Axis tick. Defaults to hide. See below.</td>
</tr>
<tr>
<td> <b>{Object}</b> axisLabel </td>
<td> varying </td>
<td> universal </td>
<td> Axis text label. See below.</td>
</tr>
<tr>
<td> <b>{Object}</b> splitLine </td>
<td> varying </td>
<td> universal </td>
<td> Split line. Defaults to show. See below.</td>
</tr>
<tr>
<td> <b>{Object}</b> splitArea </td>
<td> varying </td>
<td> universal </td>
<td> Split area. Defaults to hide. See below.</td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> category axis </td>
<td> Category list, also label content, see <a href="#AxisData" title="">axis.data</a>. </td>
</tr>
</table>
<P> boundaryGap</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Configuration </th>
<td> boundaryGap: true </td>
<td> boundaryGap: false </td>
</tr>
<tr>
<th> Effects </th>
<td><img src="./asset/img/doc/axisBoundaryGap1.jpg" title="" alt="axisBoundaryGap1"/></td>
<td><img src="./asset/img/doc/axisBoundaryGap.png" title="" alt="axisBoundaryGap"/></td>
</tr>
</table>
<P> scale strategy</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Configuration </th>
<td>scale: false</td>
<td>scale: true</td>
</tr>
<tr>
<th> Effects </th>
<td><img src="./asset/img/doc/axisScale1.png" title="" alt="axisScale1"/></td>
<td><img src="./asset/img/doc/axisScale2.png" title="" alt="axisScale2"/></td>
</tr>
</table>
<P> description of axis properties</P>
<p><img src="./asset/img/doc/axisDetail.png" title="" alt="axisDetail"/></P>
<h5>axis.axisLine<a name="AxisAxisline"> </a></h5>
<P> axis line. Defaults to show. Default styles are listed below. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td> both </td>
<td> Specifies whether to show axisLine. Defaults to true, which is a prerequisite for the following properties. </td>
</tr>
<tr>
<td> <b>{boolean}</b> onZero </td>
<td> true </td>
<td> both </td>
<td> Locates to the coordinates whose vertical axis value is 0. </td>
</tr>
<tr>
<td> <b>{Object}</b> lineStyle </td>
<td> <pre>{
color: '#48b',
width: 2,
type: 'solid'
} </pre> </td>
<td> both </td>
<td> controls the line style, (see <a href="#LineStyle" title="">lineStyle</a>). </td>
</tr>
</table>
<h5>axis.axisTick<a name="AxisAxistick"> </a></h5>
<P> axis tick. For value axis, defaults to hide. For category axis, defaults to show. Default styles are listed below. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> false (value | time)<br/> true (category axis) </td>
<td> universal </td>
<td> Specifies whether to show axisTick. Defaults to false. The following properties will be set by default values When it is true. </td>
</tr>
<tr>
<td> <b>{string | number | function}</b> interval </td>
<td> 'auto' </td>
<td> category axis </td>
<td> specifies the interval between axisTicks. Defaults to 'auto'. Valid values are:
<br/>'auto' (automatically hide those that cannot be displayed) | 0 (unhide all) |
<br/><b>{number}</b>(specified by the user).
<br/><b>{function}</b>callback, paramater is [index，data[index]], return true to show and false to hide
</td>
</tr>
<tr>
<td> <b>{boolean}</b> onGap </td>
<td> null </td>
<td> category axis </td>
<td> Specifies whether the axisTick will be positioned at regular intervals. Defaults to boundaryGap. </td>
</tr>
<tr>
<td> <b>{boolean}</b> inside </td>
<td> false </td>
<td> universal </td>
<td> Specifies whether the axisTick will be displayed inside the grid. Defaults to outside. </td>
</tr>
<tr>
<td> <b>{number}</b> length </td>
<td> 5 </td>
<td> universal </td>
<td> controls the length of the line. </td>
</tr>
<tr>
<td> <b>{Object}</b> lineStyle </td>
<td> <pre>{
color: '#333',
width: 1
} </pres></td>
<td> both </td>
<td> controls the line style, (see<a href="#LineStyle" title="">lineStyle</a>). </td>
</tr>
</table>
<h5>axis.axisLabel<a name="AxisAxislabel"> </a></h5>
<P> options for axis label </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td> universal </td>
<td> Specifies whether to show axisLabel. Defaults to true, which is a prerequisite for the following properties. </td>
</tr>
<tr>
<td> <b>{string | number | function}</b> interval </td>
<td> 'auto' </td>
<td> category axis </td>
<td> specifies the interval between axisLabels. Defaults to 'auto'. Valid values are:
<br/>'auto' (automatically hide those that cannot be displayed) | 0 (unhide all) |
<br/><b>{number}</b>(specified by the user).
<br/><b>{function}</b>callback, paramater is [index，data[index]], return true to show and false to hide
</td>
</tr>
<tr>
<td> <b>{number}</b> rotate </td>
<td> 0 </td>
<td> universal </td>
<td> The angle of rotation, defaults to 0 (not rotate). Positive value for counterclockwise rotation, negative value for clockwise rotation. Valid values are: -90 ~ 90. </td>
</tr>
<tr>
<td> <b>{number}</b> margin </td>
<td> 8 </td>
<td> universal </td>
<td> The pixel distance between the axisLabel and the axis.Defaults to 8. </td>
</tr>
<tr>
<td> <b>{boolean}</b> clickable </td>
<td> false </td>
<td> universal </td>
<td> Specifies whether the axisLabel is clickable. </td>
</tr>
<tr>
<td> <b>{string | Function}</b> formatter </td>
<td> null </td>
<td> universal </td>
<td> split name formatter: <b>{string}</b> (Template) | <b>{Function}</b> </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td><pre>{
color: '#333'
} </pre> </td>
<td> universal </td>
<td> text style (see <a href="#TextStyle" title="">textStyle</a>). If the axis is value or time axis, color accepts method callback to achieve custom color definition, support <a href="https://github.com/ecomfe/echarts/issues/226" target="_blank">#226 »</a> </td>
</tr>
</table>
<P> split name formatter:</P>
<ul>
<li>
<b>{string}</b>, Template, its variables are:
<ul>
<li>
{value}: content or value
</li>
</ul>
</li>
<li>
<b>{Function}</b>, pass in parameters and template varaibles:
<ul>
<li>
eg：function (value) {return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][value]; }
</li>
</ul>
</li>
</ul>
<h5>axis.splitLine<a name="AxisSplitline"> </a></h5>
<P> split line. Defaults to show. Default styles are listed below.</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td> universal </td>
<td> Specifies whether to show splitLine. Defaults to true, which is a prerequisite for the following properties. </td>
</tr>
<tr>
<td> <b>{boolean}</b> onGap </td>
<td> null </td>
<td> category axis </td>
<td> Specifies whether the splitLine will be positioned at regular intervals. Equal to boundaryGap by default. </td>
</tr>
<tr>
<td> <b>{Object}</b> lineStyle </td>
<td><pre>{
color: ['#ccc'],
width: 1,
type: 'solid'
} </pre></td>
<td> universal </td>
<td> controls the line style ,(see <a href="#LineStyle" title="">lineStyle</a>). </td>
</tr>
</table>
<h5>axis.splitArea<a name="AxisSplitarea"> </a></h5>
<P> split area, defaults to hide: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> false </td>
<td> universal </td>
<td>Specifies whether to show splitArea. Defaults to false. The following properties will be set by default values When it is true. </td>
</tr>
<tr>
<td> <b>{boolean}</b> onGap </td>
<td> null </td>
<td> category axis </td>
<td> Specifies whether the splitArea will be positioned at regular intervals. Defaults to boundaryGap. </td>
</tr>
<tr>
<td> <b>{Object}</b> areaStyle </td>
<td><pre>{
color: [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
} </pre> </td>
<td> universal </td>
<td> the property "areaStyle" (see <a href="#AreaStyle" title="">areaStyle</a>), controls area style, the color array will be changed at intervals. </td>
</tr>
</table>
<h5>axis.data<a name="AxisData"> </a></h5>
<P> the array of category axis text label, specifies label content. The array items are usually tex. '\n' represents a line feed, for example:</P>
<div class="code">
<pre>[&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, ..., &#39;Dec&#39;]
</pre>
</div> <P> When you need to customize individual labels, the array can use objects to accept textStyle to set custom labels, such as: </P>
<div class="code">
<pre>[
&#39;Jav&#39;, &#39;Feb&#39;, &#39;Mar&#39;,
{
value:&#39;Apr&#39;, //Text content, if the split name formatter is specified, this value will be passed in as a template variable value ​​or parameter.
textStyle:{ //see textStyle
color : &#39;red&#39;
...
}
},
&#39;May&#39;, &#39;...&#39;
]
</pre>
</div>
<h4>polar<a name="Polar"> </a></h4>
<P> polar coordinates: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 0 </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{Array}</b> center </td>
<td> ['50%', '50%'] </td>
<td> coordinate of the center, in pixels or percent. The formula for calculating percent: min(width, height) * 50%. </td>
</tr>
<tr>
<td> <b>{number}</b> radius </td>
<td> '75%' </td>
<td> radius, in pixels or in percent. The formula for calculating percent: min(width, height) / 2 * 75%. </td>
</tr>
<tr>
<td> <b>{number}</b> startAngle </td>
<td> 90 </td>
<td> The start angle. Valid range is: [-180,180]</td>
</tr>
<tr>
<td> <b>{number}</b> splitNumber </td>
<td> 5 </td>
<td> the number of segments, defaults to 5 </td>
</tr>
<tr>
<td> <b>{Object}</b> name </td>
<td><pre>{
show: true,
formatter: null,
textStyle: {
color:#333
}
} </pre></td>
<td> name of coordinate axis. </td>
</tr>
<tr>
<td> <b>{Array}</b> boundaryGap </td>
<td> [0, 0] </td>
<td> blank border on each side of the value axis. the value within the array represents percentage, [the difference between the original minimum value and the final minimum value, the difference between the original maximum value and the final maximum value]. </td>
</tr>
<tr>
<td> <b>{boolean}</b> scale </td>
<td> false </td>
<td> If false, the value axis must start with 0. If true, you can set the minimum and maximum value of value axis as the starting and ending value of your value axis. </td>
</tr>
<tr>
<td> <b>{Object}</b> axisLine </td>
<td> {show : true} </td>
<td> axis line. Defaults to show. The property "show" specifies whether to show axisLine or not. The property "lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>) controls line style for axisLine. </td>
</tr>
<tr>
<td> <b>{Object}</b> axisLabel </td>
<td> {show : false} </td>
<td> axis label, see <a href="#AxisAxislabel" title="">axis.axisLabel</a>. </td>
</tr>
<tr>
<td> <b>{Object}</b> splitLine </td>
<td> {show : true} </td>
<td> split line. Defaults to show. The property "show" specifies whether to show splitLine or not. The property "lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>) controls line style for splitLine. </td>
</tr>
<tr>
<td> <b>{Object}</b> splitArea </td>
<td> {show : true} </td>
<td> split area. Defaults to hide. The property "show" specifies whether to show splitArea or not. The property "areaStyle" (see <a href="#AreaStyle" title="">areaStyle</a>) controls area style for splitArea. </td>
</tr>
<tr>
<td> <b>{String}</b> type </td>
<td> 'polygon' </td>
<td> The shape of polar coordinates. Valid values are: 'polygon'|'circle'. </td>
</tr>
<tr>
<td> <b>{Array}</b> indicator </td>
<td> [] </td>
<td> radar indicator list, also label content, see the example below. </td>
</tr>
</table>
<div class="code">
<pre>
indicator : [
{text : 'appearance'},
{text : 'photograph', min : 0},
{text : 'system', min : 0, max : 100},
{text : 'performance', axisLabel: {...}},
{text : 'screen'}
]
</pre>
</div>
<h4>series (universal)<a name="Series"> </a></h4>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. Some options are applicable to specific chart types only. Please note the type of application. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> zlevel </td>
<td> 0 </td>
<td> universal </td>
<td> The first grade cascading control. Every zlevel will be allocated to a independent canvas, charts and components with the same zlevel will be rendered in the same canvas. The higher zlevel the closer to the top. More canvas dom will need more memory and performance, so never set too many zlevel. Most of the time, the second grade cascading control 'z' is recommended.</td>
</tr>
<tr>
<td> <b>{number}</b> z </td>
<td> 2 </td>
<td> universal </td>
<td> The second grade cascading control, In the same canvas (zlevel), the higher z the closer to the top.</td>
</tr>
<tr>
<td> <b>{string}</b> type </td>
<td> null </td>
<td> universal </td>
<td> chart type. Required parameter. If null or unsupported type, the data of this series will not be shown. Valid values are:
<br/>'line' | 'bar' | 'scatter' | 'candlestick'
<br/> 'pie' | 'radar' | 'chord' | 'force' | 'map'
</td>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td> null </td>
<td> universal </td>
<td> name of series. if the legend is enabled, the value will be indexed to legend.data. </td>
</tr>
<tr>
<td> <b>{Object}</b> tooltip </td>
<td> null </td>
<td> universal </td>
<td> style of the tooltip. Applicable to this series only. If unspecified, use option.tooltip (See <a href="#Tooltip" title="">tooltip</a>), a small "hover box" with detailed information about the item being hovered over. </td>
</tr>
<tr>
<td> <b>{boolean}</b> clickable </td>
<td> true </td>
<td> universal </td>
<td> Specifies data graphic clickable or not, default to true, recommend to false when you do not have a click event handler.</td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> null </td>
<td> universal </td>
<td> item style, (see <a href="#ItemStyle" title="">itemStyle</a>). </td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> universal </td>
<td> data, (see<a href="#SeriesData" title="">series.data</a>). </td>
</tr>
<tr>
<td> <b>{Array}</b> markPoint </td>
<td> {} </td>
<td> universal </td>
<td> markPoint, (see<a href="#SeriesMarkPoint" title="">series.markPoint</a>). </td>
</tr>
<tr>
<td> <b>{Array}</b> markLine </td>
<td> {} </td>
<td> universal </td>
<td> markLine, (see<a href="#SeriesMarkLine" title="">series.markLine</a>). </td>
</tr>
</table>
<h5>series (Cartesian) <a name="SeriesCartesian"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. Some options are applicable to specific chart types only. Please note the type of application. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> stack </td>
<td> null </td>
<td> line, column </td>
<td> name of the stack, USELESS in irregular line|bar. It is used in stacked charts with multiple groups of data. For example, stack:'group1' means to stack the values of the data whose stack value is 'group1' in the series array. </td>
</tr>
<tr>
<td> <b>{number}</b> xAxisIndex </td>
<td> 0 </td>
<td> line, column, scatter, candlestick </td>
<td><a href="#Xaxis" title="">xAxis</a> the index of the axis array. Specifies the horizontal axis that the data series uses. </td>
</tr>
<tr>
<td> <b>{number}</b> yAxisIndex </td>
<td> 0 </td>
<td> line, column, scatter, candlestick </td>
<td><a href="#Yaxis" title="">yAxis</a> the index of the axis array. Specifies the vertical axis that the data series uses. </td>
</tr>
<tr>
<td> <b>{number | string} </b>barGap </td>
<td> '30%' </td>
<td> column </td>
<td> the distance between each bar. Defaults to barWidth * 30%. Can also set to be a fixed value. </td>
</tr>
<tr>
<td> <b>{number | string} </b>barCategoryGap </td>
<td> '20%' </td>
<td> column </td>
<td> the distance between each bar cetegory. Defaults to barCategoryWidth * 20%. Can also set to be a fixed value. </td>
</tr>
<tr>
<td> <b>{number}</b> barMinHeight </td>
<td> 0 </td>
<td> column </td>
<td> The minimum height for the bar. Used to prevent tiny item values from affecting interaction. </td>
</tr>
<tr>
<td> <b>{number}</b> barWidth </td>
<td> adaptive </td>
<td> column, candlestick</td>
<td> the width of the bar/ candlestick. Adaptive when not specified. </td>
</tr>
<tr>
<td> <b>{number}</b> barMaxWidth </td>
<td> adaptive </td>
<td> bar, candlestick</td>
<td> the maximum width of the bar ( candlestick ). Adaptive when not specified. </td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> null </td>
<td> line, scatter </td>
<td> A predefined shape or symbol for the marker. The default symbol is automatically selected from (When all symbols are used, new symbols are pulled from the start again. Set it to'none' if you don't want to show the symbol): <br/>
'circle' | 'rectangle' | 'triangle' | 'diamond' |<br/>
'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'
<br/>Other possible values are 'heart', 'droplet', 'pin', 'arrow' and 'star'. Although They are not included in the regular eight symbols above, you can use them at both series and data level. In addition, you can use 'star' + n (n>=3) to get N-pointed star, like 'star6' for six-pointed star.
<br/>Since 1.3.5, ECharts added support for setting custom image as symbol. The URL to an image can be given on this form:'image://' + 'URL', such as 'image://../asset/ico/favicon.png'.
<br/>See <a href="./example/line.html#-en" target="_blank">example 》</a>
</td>
</tr>
<tr>
<td> <b>{number | Array | Function} </b>symbolSize </td>
<td> 2 | 4</td>
<td> line (2), scatter(4) </td>
<td> size of the symbol. It is usually a number. But if you use an image as symbol. To prevent stretching of image caused by same width and height, you can use an array as symbolSize which first element is width and the second is height. When "calculable" is enabled, it's recommended to increase symbolSize for better interactive experience. When implementing a bubble chart, symbolSize should be a Function, and the bubble size depends on the return value of the method, the parameter passed in is the current data item (value array). </td>
</tr>
<tr>
<td> <b>{number}</b> symbolRotate </td>
<td> null </td>
<td> line, scatter </td>
<td> the angle by which the symbol is rotated. Valid range is: [-180,180]</td>
</tr>
<tr>
<td> <b>{boolean}</b> showAllSymbol </td>
<td> false </td>
<td> line </td>
<td> By default, a symbol will show only when its corresponding axis label does. set it to true if you need to show all the symbols.</td>
</tr>
<tr>
<td> <b>{boolean}</b> smooth </td>
<td> false </td>
<td> line </td>
<td> smoothed line, while smooth is true, lineStyle.type can not be dashed.
</tr>
<tr>
<td> <b>{boolean}</b> dataFilter </td>
<td> 'nearst' </td>
<td> line </td>
<td> ECharts will optimize for the situation when data number is much larger than viewport width. It will filter the data showed in one pixel width. And this option is for data filtering strategy.<br />
Options: 'nearest', 'min', 'max', 'average'.</td>
</tr>
<tr>
<td> <b>{boolean}</b> large </td>
<td> false </td>
<td> Scatter </td>
<td> enables large scale scatter. </td>
</tr>
<tr>
<td> <b>{number}</b> largeThreshold </td>
<td> 2000 </td>
<td> Scatter </td>
<td> the threshold of large scale scatter anto-switch. Valid when set to true. </td>
</tr>
<tr>
<td> <b>{boolean}</b> legendHoverLink </td>
<td> true </td>
<td> line, bar, scatter </td>
<td> Enables legend hover link to the chart.</td>
</tr>
</table>
<h5>series (pie)<a name="SeriesPie"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Array}</b> center </td>
<td> ['50%', '50%'] </td>
<td> coordinate of the center, in pixels or percent. The formula for calculating percent: min(width, height) * 50%. </td>
</tr>
<tr>
<td> <b>{number | Array}</b> radius </td>
<td> [0, '75%'] </td>
<td> radius, in pixels or in percent. The formula for calculating percent: min(width, height) / 2 * 75%. If the array [inner radius, outer radius] is passed in, it wil become a doughnut. </td>
</tr>
<tr>
<td> <b>{number}</b> startAngle </td>
<td> 90 </td>
<td> start angle, pie (90), gauge (225). Valid range is [-360,360]. </td>
</tr>
<tr>
<td> <b>{number}</b> minAngle </td>
<td> 0 </td>
<td> The minimum angle for the pie. Used to prevent tiny item values from affecting interaction. </td>
</tr>
<tr>
<td> <b>{boolean}</b> clockWise </td>
<td> true </td>
<td> Specifies whether it is displayed in clockwise direction. </td>
</tr>
<tr>
<td> <b>{string}</b> roseType </td>
<td> null </td>
<td>>Nightingale's rose diagram. 'radius' | 'area' </td>
</tr>
<tr>
<td> <b>{number}</b> selectedOffset </td>
<td> 10 </td>
<td> Offset of the sector when selected. </td>
</tr>
<tr>
<td> <b>{boolean | string}</b> selectedMode </td>
<td> null </td>
<td> selected mode. Defaults to false. Can be one of single, multiple. </td>
</tr>
<tr>
<td> <b>{boolean}</b> legendHoverLink </td>
<td> true </td>
<td> Enables legend hover link to the chart.</td>
</tr>
</table>
<h5>series (radar)<a name="SeriesRadar"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> polarIndex </td>
<td> 0 </td>
<td> polar coordinates index. </td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> null </td>
<td> same as <a href="#SeriesCartesian" title="">series (Cartesian). </a></td>
</tr>
<tr>
<td> <b>{number | Array | Function} </b>symbolSize </td>
<td> 2 </td>
<td> same as <a href="#SeriesCartesian" title="">series (Cartesian). </a></td>
</tr>
<tr>
<td> <b>{number}</b> symbolRotate </td>
<td> null </td>
<td> same as <a href="#SeriesCartesian" title="">series (Cartesian). </a></td>
</tr>
<tr>
<td> <b>{boolean}</b> legendHoverLink </td>
<td> true </td>
<td> Enables legend hover link to the chart.</td>
</tr>
</table>
<h5>series (map)<a name="SeriesMap"> </a></h5>
<P>Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean | string}</b> selectedMode </td>
<td> null </td>
<td> selected mode. Defaults to false. Can be one of single, multiple. </td>
</tr>
<tr>
<td> <b>{string}</b> mapType </td>
<td> 'china' </td>
<td> map type, including World Map, China Map, Map of China Provinces &amp; Cities. For the mapType of China Provinces &amp; Cities, just use simplified Chinese.
<br/>新疆, 西藏, 内蒙古, 青海, 四川, 黑龙江, 甘肃, 云南, 广西, 湖南, 陕西,
<br/>广东, 吉林, 河北, 湖北, 贵州, 山东, 江西, 河南, 辽宁, 山西, 安徽, 福建,
<br/>浙江, 江苏, 重庆, 宁夏, 海南, 台湾, 北京, 天津, 上海, 香港, 澳门'
<br/>Supports sub-region mode, which develops sub-region maps from the main map types. The format is 'main map type | sub-region name', like
<br/>'world|Brazil', 'china|广东'. See <a href="./example/map8.html#-en" target="_blank">example 》</a>
</td>
</tr>
<tr>
<td> <b>{boolean}</b> hoverable </td>
<td> true </td>
<td> Non-numerical display (eg: only used to display markPoints and markLines). Set it to false to turn off regional hover highlight. </td>
</tr>
<tr>
<td> <b>{boolean}</b> dataRangeHoverLink </td>
<td> true </td>
<td> enables dataRange hover link to the chart</td>
</tr>
<tr>
<td> <b>{Object}</b> mapLocation </td>
<td> {x:'center',y:'center'} </td>
<td> Map location. x, y, width, height are configurable. Valid values for x and y are 'top', 'bottom', 'left', 'right', 'center', or absolute pixel value. Width and height can be set in pixel values. If any parameter is null, it will be adaptive in accordance with other parameters. </td>
</tr>
<tr>
<td> <b>{string}</b> mapValueCalculation </td>
<td> 'sum' </td>
<td> Calculation of map value. Defaults to sum. Valid values are: 'sum' | 'average' </td>
</tr>
<tr>
<td> <b>{number}</b> mapValuePrecision </td>
<td> 0 </td>
<td> Decimal precision of map value calculation. Valid when mapValueCalculation is set to average. Defaults to rounding.If decimal precision is needed, set an integer greater than 0.</td>
</tr>
<tr>
<td> <b>{boolean}</b> showLegendSymbol </td>
<td> true </td>
<td> Color of show legend symbol (small dots symbolizing different series). Valid when there is a legend. </td>
</tr>
<tr>
<td> <b>{boolean | string}</b> roam </td>
<td> false </td>
<td> Specifies whether the wheel zoom and drag roam will be enabled. Default to false (boolean), can be true (boolean) and 'scale' (string) for just enable the zoom(in/out), 'move' (string) for just enable the move.</td>
</tr>
<tr>
<td> <b>{Object}</b> scaleLimit </td>
<td> null </td>
<td> Controls the limit of wheel zoom. You can specify {max:number, min:number}, max is magnification coefficient, whose valid value should be greater than 1; min is reduction coefficient, whose valid value should be less than 1. </td>
</tr>
<tr>
<td> <b>{Object}</b> nameMap </td>
<td> null </td>
<td> name mapping of the custom region, like {'China' : '中国'}. </td>
</tr>
<tr>
<td> <b>{Object}</b> textFixed </td>
<td> null </td>
<td> fixed location of the name text of a region in px. When the value is positive, move to the lower left; When the value is negative, move to the upper right. Such as {'China' : [10, -10]}. </td>
</tr>
<tr>
<td> <b>{Object}</b> geoCoord </td>
<td> null </td>
<td> Specifies the location of the name text of a region by absolute latitude and longitude. For example, {'Islands':[113.95, 22.26]}: the name of Hong Kong's Islands District is located at 22.26°N and 113.95°E. </td>
</tr>
<tr>
<td> <b>{Object}</b> heatmap </td>
<td> null </td>
<td> Heatmap layer of map. Same with <a href="#SeriesHeatmap">series (heatmap)</a></td>
</tr>
</table>
<h5>series (heatmap)<a name="SeriesHeatmap"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> blurSize </td>
<td> 30 </td>
<td> Blur size of a data point.</td>
</tr>
<tr>
<td> <b>{Array}</b> gradientColors </td>
<td> ['blue', 'cyan', 'lime', 'yellow', 'red'] </td>
<td> It could be an array of offset and color like [{ offset: 0.2, color: 'blue' }, { offset 0.8, color: 'cyan' }] or an array of color strings like ['blue', 'cyan', 'lime', 'yellow', 'red'], with which the color will transform evenly.</td>
</tr>
<tr>
<td> <b>{number}</b> minAlpha </td>
<td> 0.05 </td>
<td> If the unified value is less than minAlpha, it will be set to minAlpha to ensure small data value can also be visible on the chart.</a></td>
</tr>
<tr>
<td> <b>{number}</b> valueScale </td>
<td> 1 </td>
<td> All data values will multiply this value.</a></td>
</tr>
<tr>
<td> <b>{number}</b> opacity </td>
<td> 1 </td>
<td> Opacity of the heatmap. </a></td>
</tr>
</table>
<h5>series (force)<a name="SeriesForce"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Array}</b> categories </td>
<td> null </td>
<td>Categories of nodes in the force-directed chart, see <a href="#categories">categories</a></td>
</tr>
<tr>
<td> <b>{Array}</b> nodes </td>
<td> [] </td>
<td> Node data in the force-directed chart. see <a href="#nodes(data)">nodes(data)</a>. Following are properties only in force graph.
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> {Array} initial </td>
<td></td>
<td> Forces to specify the initial value of the node. When not specified, it will be randomly generated within a certain range.</td>
</tr>
<tr>
<td> {boolean} fixX </td>
<td>false</td>
<td> Specifies whether to fix the X-value of the node. Works with initial. </td>
</tr>
<tr>
<td> {boolean} fixY </td>
<td>false</td>
<td>Specifies whether to fix the Y-value of the node. Works with initial.</td>
</tr>
<tr>
<td> {boolean} ignore </td>
<td>false</td>
<td>Specifies whether to neglect the node.</td>
</tr>
<tr>
<td> {boolean} draggable </td>
<td></td>
<td> Specifies whether the node is draggable. </td>
</tr>
<tr>
<td> {number} category </td>
<td></td>
<td> Category index of the node. </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> <b>{Array}</b> links </td>
<td> [] </td>
<td> link data in the force-directed chart. see <a href="#GraphLinks">links</a>
</tr>
<tr>
<td> <b>{Array}</b> matrix </td>
<td> [] </td>
<td> Adjacency matrix. see <a href="#GraphMatrix">matrix</a></td>
</tr>
<tr>
<td><b> {Array} center</b></td>
<td>['50%', '50%']</td>
<td>center of the layout, in pixels or in percent.</td>
</tr>
<tr>
<td><b> {number} size</b></td>
<td>100%</td>
<td>size of the layout, in pixels or in percent.</td>
</tr>
<tr>
<td> <b>{number}</b> minRadius </td>
<td> 10 </td>
<td> the minimum radius after the vertex data is mapped to the circle radius. </td>
</tr>
<tr>
<td> <b>{number}</b> maxRadius </td>
<td> 20 </td>
<td> the maximum radius after the vertex data is mapped to the circle radius. </td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> 'circle' </td>
<td> as <a href="#SeriesCartesian" title="">series (Cartesian)</a></td>
</tr>
<tr>
<td> <b>{number | Array}</b> symbolSize </td>
<td></td>
<td> size of the node. </td>
</tr>
<tr>
<td> <b>{string}</b> linkSymbol </td>
<td> 'none' </td>
<td> symbol of force's link. Can be specified as 'arrow', see <a href="#SymbolList">symbolList</a>. </td>
</tr>
<tr>
<td> <b>{Array}</b> linkSymbolSize </td>
<td> [10, 15] </td>
<td> the size of force's link symbol. </td>
</tr>
<tr>
<td> <b>{number}</b> scaling </td>
<td> 1 </td>
<td> layout scaling factor, not entirely accurate, achieves similar effect with the layout size. </td>
</tr>
<tr>
<td> <b>{number}</b> gravity </td>
<td> 1 </td>
<td> centripetal force coefficient. The greater the coefficient, the closer the node is to the center. </td>
</tr>
<tr>
<td> <b>{boolean}</b> draggable </td>
<td> true </td>
<td> specifies whether the node is draggable. </td>
</tr>
<tr>
<td> <b>{boolean}</b> large </td>
<td> false </td>
<td> it is suggested that you set it to true on a chart with over 500 vertices, use <a href="http://en.wikipedia.org/wiki/Barnes–Hut_simulation">Barnes-Hut simulation</a>; meanwhile, open useWorker and increase the value of steps. </td>
</tr>
<tr>
<td> <b>{boolean}</b> useWorker </td>
<td> false </td>
<td> specifies whether to put layout calculation into web worker when the browser supports web worker. </td>
</tr>
<tr>
<td> <b>{number}</b> steps </td>
<td> 1 </td>
<td> the number of iterations of each frame layout calculation. Since it takes much more time to render each frame than layout, so when using web worker you can increase the value of steps to balance the two, so as to achieve optimum efficiency. </td>
</tr>
<tr>
<td> <b>{boolean | string}</b> roam </td>
<td> false </td>
<td> Specifies whether the wheel zoom and drag roam will be enabled. Default to false (boolean), can be true (boolean) and 'scale' (string) for just enable the zoom(in/out), 'move' (string) for just enable the move.</td>
</tr>
</table>
<h5>series (chord)<a name="SeriesChord"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Array}</b> categories </td>
<td> null </td>
<td>Categories of nodes in the chord chart, see <a href="#categories">categories</a></td>
</tr>
<tr>
<td> <b>{Array}</b> nodes </td>
<td> [] </td>
<td> Node data in the chord chart. see <a href="#nodes(data)">nodes(data)</a></td>
</tr>
<tr>
<td> <b>{Array}</b> links </td>
<td> [] </td>
<td> link data in the chord chart. see <a href="#GraphLinks">links</a>
</tr>
<tr>
<td> <b>{Array}</b> matrix </td>
<td> [] </td>
<td> Adjacency matrix. see <a href="#GraphMatrix">matrix</a></td>
</tr>
<tr>
<td> <b>{boolean}</b> ribbonType </td>
<td>true</td>
<td>Chord with ribbon type is drawed with sector and ribbon shapes. Each ribbon can represent the weight of edge with the size of two ends. Chord without ribbon type is drawed with symbols and bezier curves. Which can't represent edge weight.</td>
</tr>
<!-- ribbonType :flase -->
<tr>
<td> <b>{string}</b> symbol </td>
<td> 'circle' </td>
<td> see <a href="#SeriesCartesian" title="">series(Cartesion)</a>, Only available if ribbonType is false</td>
</tr>
<tr>
<td> {number} symbolSize </td>
<td></td>
<td> Size of symbol, Only available if ribbonType is false </td>
</tr>
<tr>
<td> <b>{number}</b> minRadius </td>
<td> 10 </td>
<td> Minimum radius after mapping to symbol size . Only available if ribbonType is false</td>
</tr>
<tr>
<td> <b>{number}</b> maxRadius </td>
<td> 20 </td>
<td> Maximum radius after mapping to symbol size, . Only available if ribbonType is true</td>
</tr>
<!-- ribbonType :true -->
<tr>
<td> <b>{boolean}</b> showScale </td>
<td> false </td>
<td> Specifies whether the scale will be showed. Only available if ribbonType is true</td>
</tr>
<tr>
<td> <b>{boolean}</b> showScaleText </td>
<td> false </td>
<td> Specifies whether the scale text will be showed. Only available if ribbonType is true </td>
</tr>
<tr>
<td> <b>{number}</b> padding </td>
<td> 2 </td>
<td> the distance between each sector (in degrees). </td>
</tr>
<tr>
<td> <b>{string}</b> sort </td>
<td> 'none' </td>
<td> Data sorting. Can be one of none, ascending, descending. </td>
</tr>
<tr>
<td> <b>{string}</b> sortSub </td>
<td> 'none' </td>
<td> Data sorting (chord). Can be one of none, ascending, descending. </td>
</tr>
<tr>
<td> <b>{boolean}</b> clockWise </td>
<td> false </td>
<td> Specifies whether it is displayed in clockwise direction. </td>
</tr>
</table>
<h5>series (gauge)<a name="SeriesGauge"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Array}</b> center </td>
<td> ['50%', '50%'] </td>
<td> coordinate of the center, in pixels or percent. The formula for calculating percent: min(width, height) * 50%. </td>
</tr>
<tr>
<td> <b>{number | Array}</b> radius </td>
<td> [0, '75%'] </td>
<td> radius, in pixels or in percent. The formula for calculating percent: min(width, height) / 2 * 75%.
<br/> If the array [inner radius, outer radius] is passed in, it wil become a doughnut. </td>
</tr>
<tr>
<td> <b>{number}</b> startAngle </td>
<td> 225</td>
<td> start angle, pie (90), gauge (225). Valid range is: [-360,360]</td>
</tr>
<tr>
<td> <b>{number}</b> endAngle </td>
<td> -45 </td>
<td> end angle. Valid range is: [-360,360], ensure that startAngle - endAngle is positive. </td>
</tr>
<tr>
<td> <b>{number}</b> min </td>
<td> 0 </td>
<td> The specified minimum value. </td>
</tr>
<tr>
<td> <b>{number}</b> max </td>
<td> 100 </td>
<td> The specified maximum value. </td>
</tr>
<tr>
<td> <b>{number}</b> splitNumber </td>
<td> 10 </td>
<td> The number of segments. Defaults to 10. </td>
</tr>
<tr>
<td> <b>{Object}</b> axisLine </td>
<td><pre>{
show: true,
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 30
}
} </pre> </td>
<td> axis line. Defaults to show.
<br/><br/>The property "show" specifies whether to show axisLine or not.
<br/><br/>The property "lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>) controls line style for axisLine.
<br/><br/>What makes this particular lineStyle.color different is that it is a two-dimensional array that can be used to divide the gauge axis into several parts,
<br/><br/>and designate a specific color to each part on this form: [[percent, color value], [...]].
</td>
</tr>
<tr>
<td> <b>{Object}</b> axisTick </td>
<td><pre>{
show: true,
splitNumber: 5,
length :8,
lineStyle: {
color: '#eee',
width: 1,
type: 'solid'
}
} </pre> </td>
<td> axis tick. Defaults to hide.
<br/><br/>The property "show" specifies whether to show axisTick or not;
<br/><br/>The property "lineStyle"(see <a href="#LineStyle" title="">lineStyle</a>) controls line style for axisTick;
<br/><br/>The property "splitNumber" controls the number of segments;
<br/><br/>The property "length" controls line length for axisTick.
</td>
</tr>
<tr>
<td> <b>{Object}</b> axisLabel </td>
<td><pre>{
show: true,
formatter: null,
textStyle: {
color: 'auto'
}
} </pre> </td>
<td> axis label, (see <a href="#AxisAxislabel" title="">axis.axislabel</a>).
<br/><br/>The property "formatter" controls axisLabel formatting;
<br/><br/>The property "textStyle" (see <a href="#TextStyle" title="">textStyle</a>) controls text style for axisLabel.
</td>
</tr>
<tr>
<td> <b>{Object}</b> splitLine </td>
<td><pre>{
show: true,
length :30,
lineStyle: {
color: '#eee',
width: 2,
type: 'solid'
}
} </pre> </td>
<td> split line. Defaults to show.
<br/><br/>The property "show" specifies whether to show splitLine or not.
<br/><br/>The property "length" controls line length for splitLine.
<br/><br/>The property "lineStyle" (see <a href="#LineStyle" title="">lineStyle</a>) controls line style for splitLine.
</td>
</tr>
<tr>
<td> <b>{Object}</b> pointer </td>
<td><pre>{
length : '80%',
width : 8,
color : 'auto'
} </pre> </td>
<td> pointer style
<br/>The property "length" controls line length for pointer. If in percent, it is relative to the outer radius of the gauge.
<br/>The property "width" controls the widest point of the pointer.
<br/>The property "color" controls the color of the pointer.
</td>
</tr>
<tr>
<td> <b>{Object}</b> title </td>
<td><pre>{
show : true,
offsetCenter: [0, '-40%'],
textStyle: {
color: '#333',
fontSize : 15
}
} </pre> </td>
<td> gauge title
<br/><br/>The property "show" specifies whether to show gauge title or not.
<br/><br/>The property "offsetCenter" is used to locate title. Offset to the center coordinates if the array is x-axis. If in percent, it is relative to the outer radius of the gauge.
<br/><br/>The property "lineStyle" (see <a href="#TextStyle" title="">textStyle</a>) controls line style for gauge title.
</td>
</tr>
<tr>
<td> <b>{Object}</b> detail </td>
<td><pre>{
show : true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: [0, '40%'],
formatter: null,
textStyle: {
color: 'auto',
fontSize : 30
}
} </pre> </td>
<td> gauge detail
<br/><br/>The property "show" specifies whether to show detail or not.
<br/>The property "backgroundColor" controls the background color of the detail.
<br/>The property "borderWidth" controls the width of border around the detail.
<br/>The property "borderColor" controls the color of border around the detail.
<br/>The property "width" controls the width of the detail.
<br/>The property "height" controls the height of the detail.
<br/>The property "offsetCenter" is used to locate title. Offset to the center coordinates if the array is x-axis. If in percent, it is relative to the outer radius of the gauge;
<br/>The property "formatter" controls tooltip formatting;
<br/>The property "lineStyle" (see <a href="#TextStyle" title="">textStyle</a>) controls line style for tooltip.
</td>
</tr>
<tr>
<td> <b>{boolean}</b> legendHoverLink </td>
<td> true </td>
<td> Enables legend hover link to the chart.</td>
</tr>
</table>
<h5>series (funnel) <a name="SeriesFunnel"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number | string}</b> x </td>
<td> 80 </td>
<td> Abscissa on the upper left corner of the grid. In px, or in percent (string) such as '50%' (horizontal center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> y </td>
<td> 60 </td>
<td> Ordinate on the upper left corner of the grid. In px, or in percent (string) such as '50%' (vertical center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> x2 </td>
<td> 80 </td>
<td> Abscissa on the lower right corner of the grid. In px, or in percent (string) such as '50%' (horizontal center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> y2 </td>
<td> 60 </td>
<td> Ordinate on the lower right corner of the grid. In px, or in percent (string) such as '50%' (vertical center of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> width </td>
<td> null </td>
<td> The total width, defaults to the drawing area's total width - x - x2, in px, ignore x2 after specifying height. Can also be set in percent (string), such as '50%' (half the width of the display area). </td>
</tr>
<tr>
<td> <b>{number | string}</b> height </td>
<td> null </td>
<td> The total height, defaults to the drawing area's total height - y - y2, in px, ignore y2 after specifying height. Can also be set in percent (string), such as '50%' (half the height of the display area). </td>
</tr>
<tr>
<td> <b>{string}</b> funnelAlign </td>
<td> 'center' </td>
<td> Horizontal layout style, default to 'center', other option can be: 'left' | 'right' | 'center'</td>
</tr>
<tr>
<td> <b>{number}</b> min </td>
<td> 0 </td>
<td> The specified minimum value. </td>
</tr>
<tr>
<td> <b>{number}</b> max </td>
<td> 100 </td>
<td> The specified maximum value. </td>
</tr>
<tr>
<td> <b>{string}</b> minSize </td>
<td> '0%' </td>
<td> The proportion of the minimum value 'min' to the total width. If the symbol of required min is not sharp triangle, you can set minSize to achieve it. </td>
</tr>
<tr>
<td> <b>{string}</b> maxSize </td>
<td> '100%' </td>
<td> The proportion of the maximum value 'max' to the total width. </td>
</tr>
<tr>
<td> <b>{string}</b> sort </td>
<td> 'descending' </td>
<td> Data sorting, can be one of ascending, descending</td>
</tr>
<tr>
<td> <b>{number}</b> gap </td>
<td> 0 </td>
<td> The distance between data symbols. </td>
</tr>
<tr>
<td> <b>{boolean}</b> legendHoverLink </td>
<td> true </td>
<td> Enables legend hover link to the chart.</td>
</tr>
</table>
<h5>series ( eventRiver )<a name="SeriesEventRiver"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> xAxisIndex </td>
<td> 0 </td>
<td><a href="#Xaxis" title="">xAxis</a> the index of the axis array. Specifies the horizontal axis that the data series uses.</td>
</tr>
<tr>
<td> <b>{number}</b> weight </td>
<td> 1 </td>
<td> Specifies the weight of this event's series. </td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> Event list, every item in the array is an object {}, as:
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td> null</td>
<td> event name </td>
</tr>
<tr>
<td> <b>{number}</b> weight </td>
<td> 1 </td>
<td> Specifies the weight of this event. </td>
</tr>
<tr>
<td> <b>{Array}</b> evolution </td>
<td> [] </td>
<td> Evolution of a single event, every item in the array is an object {}, as:
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Date}</b> time </td>
<td> When the event is taking place, should be Data type of Javascript. </td>
</tr>
<tr>
<td> <b>{number}</b> value </td>
<td> Popularity of the event, such as the number of news reports.</td>
</tr>
<tr>
<td> {Object} detail </td>
<td> Detail of the event.
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> link </td>
<td> Link of the news.</td>
</tr>
<tr>
<td> <b>{string}</b> text </td>
<td> Description of the news.</td>
</tr>
<tr>
<td> <b>{string}</b> img </td>
<td> Image of the news.</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> <b>{boolean}</b> legendHoverLink </td>
<td> true </td>
<td> Enables legend hover link to the chart.</td>
</tr>
</table>
<h5>series ( treemap )<a name="SeriesTreemap"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Array}</b> center </td>
<td> ['50%', '50%']</td>
<td> coordinate of the center, in pixels or percent.</td>
</tr>
<tr>
<td> <b>{Array}</b> size </td>
<td> ['80%', '80%']</td>
<td> size of the chart, in pixels or percent.</td>
</tr>
<tr>
<td> <b>{string}</b> root</td>
<td> ''</td>
<td> Name of root node </td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {} </td>
<td>see <a href="#ItemStyle" title="">itemStyle</a>
peculiar properties of treemap
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Object}</b> breadcrumb </td>
<td> <pre>
{
show: true,
textStyle: {}
} </pre>
</td>
<td> bread crumb
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Boolean}</b> show </td>
<td> true </td>
<td> shown or not </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> null </td>
<td>see <a href="#TextStyle" title="">textStyle</a> </td>
</tr>
</tr>
</table>
</td>
</tr>
<tr>
<td> <b>{number}</b> childBorderWidth </td>
<td> 1 </td>
<td> width of borders of sub rectangles </td>
</tr>
<tr>
<td> <b>{string}</b> childBorderColor </td>
<td> '' </td>
<td>
color of borders of sub rectangles
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> data list, every item in the array is an object {}, as:
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td> null </td>
<td> name </td>
</tr>
<tr>
<td> <b>{Number}</b> value </td>
<td> null </td>
<td> value </td>
</tr>
<tr>
<td> {Array} children </td>
<td> []</td>
<td> children，same properties like parent's </td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {} </td>
<td>
see
<a href="#ItemStyle" title="">
itemStyle
</a>
, highest weight
</td>
</tr>
</table>
</td>
</tr>
</table>
<h5>series（tree）<a name="SeriesTree"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Object}</b> rootLocation </td>
<td>
varying
</td>
<td> coordinate of the location of the root, in pixels, percent or keywords.
<pre>
{
x: 'center' | 'left' | 'right' | 'x%' | {number},
y: 'center' | 'top' | 'bottom' | 'y%' | {number}
}</pre>
</td>
</tr>
<tr>
<td> <b>{number}</b> layerPadding </td>
<td> 100</td>
<td> padding of layers</td>
</tr>
<tr>
<td> <b>{number}</b> nodePadding </td>
<td> 30</td>
<td> padding of brothers</td>
</tr>
<tr>
<td> <b>{string}</b> orient </td>
<td> 'vertical'</td>
<td> direction of the tree, 'vertical' | 'horizontal' | 'radial'</td>
</tr>
<tr>
<td> <b>{string}</b> direction </td>
<td> ''</td>
<td> to inverse the direction of the tree, can be: 'inverse'</td>
</tr>
<tr>
<td> <b>{boolean | string}</b> roam </td>
<td> false </td>
<td> Specifies whether the wheel zoom and drag roam will be enabled. Default to false (boolean), can be true (boolean) and 'scale' (string) for just enable the zoom(in/out), 'move' (string) for just enable the move.</td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> 'circle' </td>
<td> see <a href="#SeriesCartesian" title="">series (Cartesian) </a></td>
</tr>
<tr>
<td> {number|Array} symbolSize </td>
<td> 20</td>
<td> size of nodes </td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {} </td>
<td>参见<a href="#ItemStyle" title="">itemStyle</a></td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> only one item，is Object {}，has properties：
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td> null </td>
<td> name </td>
</tr>
<tr>
<td> <b>{number}</b> value </td>
<td> null </td>
<td> value </td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> 'circle' </td>
<td> see <a href="#SeriesCartesian" title="">series (Cartesian)</a></td>
</tr>
<tr>
<td> {number|Array} symbolSize </td>
<td> 20</td>
<td> size of the node </td>
</tr>
<tr>
<td> {Array} children </td>
<td> []</td>
<td> children nodes，same properties like parent's </td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {} </td>
<td>
see
<a href="#ItemStyle" title="">
itemStyle
</a>
, highest weight
</td>
</tr>
</table>
</td>
</tr>
</table>
<h5>series (venn) <a name="SeriesVenn"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {} </td>
<td>see <a href="#ItemStyle" title="">itemStyle</a></td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> data list, contains 3 items, the first and second represent two collections, the third one is the intersection. Every item in the array is an object {}, as:
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td> null </td>
<td> name </td>
</tr>
<tr>
<td> <b>{Number}</b> value </td>
<td> null </td>
<td> value </td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {} </td>
<td>
see
<a href="#ItemStyle" title="">
itemStyle
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<h5>series（wordCloud）<a name="SeriesWordCloud"> </a></h5>
<P> Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Array}</b> center </td>
<td> <pre> ['50%', '50%'] </pre></td>
<td>Center of the word cloud. Can be relatively percent or absolutely pixel.</td>
</tr>
<tr>
<td> <b>{Array}</b> size </td>
<td> <pre> ['40%', '40%'] </pre></td>
<td>Center of the word cloud. Can be relatively percent or absolutely pixel.</td>
</tr>
<tr>
<td> <b>{Array}</b> textRotation </td>
<td> <pre>[0, 90]</pre> </td>
<td> List of optional text rotation. In default it has two options: horizontal(0) and vertical(90).</td>
</tr>
<tr>
<td> <b>{Object}</b> autoSize </td>
<td>
<pre>{
enable: true,
minSize: 12
} </pre> </td>
<td> If enable text size auto calculation. It is recommand to enable to have a better result.</td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {} </td>
<td>参见<a href="#ItemStyle" title="">itemStyle</a></td>
</tr>
</table>
<h5>series.data<a name="SeriesData"> </a></h5>
<P> Data array in the series. In line and column, length of the array is equal to the length of category axis text label array <a href="#AxisData" title="">axis.data</a>, and there is one-to-one correspondence between them. The array item is usually value, such as: </P>
<div class="code">
<pre>[12, 34, 56, ..., 10, 23]</pre>
</div>
<P> When the data corresponding to a category does not exist (ps: 'no data' is not equal to 0), you can use '-' to indicate 'no data'. In line, 'no data' is showed by a breakpoint; in column, 'no data' is showed by a missing column, such as: </P>
<div class="code">
<pre>[12, &#39;-&#39;, 56, ..., 10, 23]</pre>
</div>
<P> When you need to customize individual contents, array items can use objects, such as: </P>
<div class="code">
<pre>[
12, 34,
{
value : 56,
tooltip:{}, //custom tooltip，applicable to the item only, see tooltip
itemStyle:{} //custom itemStyle=，applicable to the item only, see itemStyle
},
..., 10, 23
]
</pre>
</div>
<P> In scatter &amp; bubble, value configuration is quite special. Both its x-axis and y-axis can be value axis, and you need to specify bubble size in the bubble chart. Hence the configuration for scatter: </P>
<div class="code">
<pre>[
{
value : [10, 25, 5] //[xValue, yValue, rValue] (x-axis value, y-axis value, size(optional))
},
[12, 15, 1]
...
]
</pre>
</div>
<P> In candlestick, value configuration is quite special. Its value content is an array with the length of 4, which respectively represents [opening price, closing price, the minimum value, the maximum value]</P>
<div class="code">
<pre>[
{
value : [2190.1, 2148.35, 2126.22, 2190.1] // opening price, closing price, the minimum value, the maximum value
},
[2242.26, 2210.9, 2205.07, 2250.63],
...
]
</pre>
</div>
<P> In pie, you need to specify the name for each part of data. Selected mode can be set. Hence the configuration: </P>
<div class="code">
<pre>[
{
value : 12，
name : &#39;apple&#39; //the name for each part of data
},
...
]
</pre>
</div>
<P> In map, you need to specify the province for each part of data. Selected mode can be set. Hence the configuration: </P>
<div class="code">
<pre>[
{
name: '北京',
value: 1234,
selected: true
},
{
name: '天津',
value: 321
},
...
]
</pre>
</div>
<h5>series.markPoint<a name="SeriesMarkPoint"> </a></h5>
<P> markPoint in the series</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> clickable </td>
<td> true </td>
<td> Specifies data graphic clickable or not, default to true, recommend to false when you do not have a click event handler.</td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> 'pin' </td>
<td> the symbol of markPoint, same as series' <a href="#Series">symbol</a>. </td>
</tr>
<tr>
<td> <b>{number | Array | Function} </b> symbolSize </td>
<td> 10 </td>
<td> the size of markPoint symbol, same as series' <a href="#Series">symbolSize</a>. </td>
</tr>
<tr>
<td> <b>{number}</b> symbolRotate </td>
<td> null </td>
<td> the angle by which markPoint symbol rotates, same as series' <a href="#Series">symbolRotate</a>. </td>
</tr>
<tr>
<td> <b>{boolean}</b> large </td>
<td> false </td>
<td> Specifies whether the large scale markPoint mode will be enabled. </a> </td>
</tr>
<tr>
<td> <b>{Object}</b> effect </td>
<td><pre>{
show: false,
type: 'scale',
loop: true,
period: 15,
scaleSize : 2,
bounceDistance: 10,
color : null,
shadowColor : null,
shadowBlur : 0
} </pre></td>
<td> glow effect for markPoint symbol:
<br/>show: specifies whether to show glow effect or not. Defaults to false.
<br/>type effect type, default to 'scale', can be 'bounce'.
<br/>loop: specifies whether to play the animation in a loop. Defaults to true.
<br/>period: animation period. No units. The larger the value, the slower. Defaults to 15.
<br/>scaleSize: magnification. Based on markPoint symbolSize, available when type is scale.
<br/>bounceDistance bouncing distance, in px, available when type is bounce.
<br/>color: color of the glow. The default value is pulled from the markPoint itemStyle array.
<br/>shadowColor: color of the shadow. The default value is pulled from the color array.
<br/>shadowBlur: blur degree of shadow. Defaults to 0.
<br/><a href="./example/map11.html#-en" target="_blank">Baidu Migration (Simulation) »</a>
</td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {...} </td>
<td> style for markPoint symbol, same as series' <a href="#Series">itemStyle</a>. </td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> data of markPoint symbol, see below. </td>
</tr>
</table>
<h5>series.markPoint.data<a name="SeriesMarkPointData"> </a></h5>
<P> markPoint data array. The most direct data items can directly specify markPoint position (x, y) and the relevant name and value. It's basically like this in pie, radar, force, and chord: </P>
<div class="code">
<pre>data : [
{name: 'markPoint1', value: 100, x: 50, y: 20},
{name: 'markPoint2', value: 200, x: 150, y: 120},
...
]</pre>
</div>
<P> In Cartesian charts like line, bar, candlestick, and scatter, directly specifying the location is not the only choice you've got. If you want to locate markPoint by Cartesian system, you can make it via xAxis, yAxis. These two values ​​will, in accordance with the specific axis type and parameters passed in, make automatic convertions as follows: </P>
<div class="code">
<pre>data : [
{name: 'markPoint1', value: 100, xAxis: 1, yAxis: 20}, // When xAxis is the category axis, value 1 will be understood as the index of the category axis.
{name: 'markPoint2', value: 100, xAxis: 'Wednesday', yAxis: 20}, // When xAxis is the category axis, String 'Wednesday' will be understood as matching the category axis text.
{name: 'markPoint3', value: 200, xAxis: 10, yAxis: 20}, // When xAxis/yAxis is the value axis, whatever passed in will be understood as a value and be conversed to location.
...
]</pre>
</div>
<P> And the most practical bit is, in line, bar and scatter, you can directly use the following off-the-shelf special points as markPoints: </P>
<div class="code">
<pre>data : [
{type : 'max', name: 'custom name'}, // the maximum value
{type : 'min', name: 'custom name'} // the minimum value
]</pre>
</div>
<P> markPoints are quite special and yet most commonly used in maps. In addition to direct location, if you want it to be based on geographic coordinates, and zoom with the map's scale roaming, you need to provide a geoCoord for markPoint, as follows. </P>
<div class="code">
<pre>data : [
{name: '北京', value: 100},
{name: '上海', value: 200},
...
],
geoCoord : {
"北京":[116.46,39.92], // Supports array [longitude, latitude]
"上海": {x: 121.48, y: 31.22}, // Supports object {x: longitude, y: latitude}
...
}
</pre>
</div>
<h5>series.markLine<a name="SeriesMarkLine"> </a></h5>
<P> markLine in the series</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> clickable </td>
<td> true </td>
<td> Specifies data graphic clickable or not, default to true, recommend to false when you do not have a click event handler.</td>
</tr>
<tr>
<td> <b>{Array | string}</b> symbol </td>
<td> ['circle', 'arrow'] </td>
<td> symbols of the start and end of markLine. If the two are the same, string can be directly passed in. Same as series' <a href="#Series">symbol</a>. </td>
</tr>
<tr>
<td> <b>{Array | number | Function}</b> symbolSize </td>
<td> [2, 4] </td>
<td> sizes of the start and end symbols of markLine. Half-width (radius) parameters. If the two are the same, number or function can be directly passed in. Same as series' <a href="#Series">symbolSize</a>. </td>
</tr>
<tr>
<td> <b>{Array | number} </b>symbolRotate </td>
<td> null </td>
<td> angles by which the start and end markLine symbols rotate, same as series' <a href="#Series">symbolRotate</a>. </td>
</tr>
<tr>
<td> <b>boolean</b> large</td>
<td> false </td>
<td>
If enable optimization for large scale markline. Large scale means line number >= 2k.
<br />Optimization will batch lines drawing. Lines of series will force to have same style. And symbols of two end of line will be ignore.
</td>
</tr>
<tr>
<td> <b>{boolean}</b> smooth </td>
<td> false </td>
<td> smoothed line, while smooth is true, lineStyle.type can not be dashed.</td>
</tr>
<tr>
<td> <b>{number}</b> smoothness </td>
<td> 0.2 </td>
<td> Line smoothness. Only available when smooth is true</td>
</tr>
<tr>
<td> <b>{number}</b> precision </td>
<td> 2 </td>
<td> precision, use for the average markLine.</td>
</tr>
<tr>
<td> <b>{Object}</b> bundling </td>
<td>
<pre>{
enable: false,
maxTurningAngle: 45
}</pre>
</td>
<td>
Edge Bundling
<br />
<br />enable: If enable edge bundling.
<br />maxTurningAngle: Max turning angle of bundled edge, ranges from 0 degree to 90 degree.
<br />
<br />Tip：Edge bundling use algorithm from "Multilevel Agglomerative Edge Bundling for Visualizing Large Graphs"
</td>
</tr>
<tr>
<td> <b>{Object}</b> effect </td>
<td><pre>{
show: false,
loop: true,
period: 15,
scaleSize : 2,
color : null,
shadowColor : null,
shadowBlur : null
} </pre></td>
<td> glow effect for markLine symbol:
<br />
<br/>show: specifies whether to show. Defaults to false.
<br/>loop: specifies whether to play the animation in a loop. Defaults to true.
<br/>period: animation period. No units. The larger the value, the slower. Defaults to 15.
<br/>scaleSize: magnification. Based on markLine lineWidth.
<br/>color: color of the glow. The default value is pulled from the markLine itemStyle array.
<br/>shadowColor: color of the shadow. The default value is pulled from the color array.
<br/>shadowBlur: blur degree of shadow. The default value is based on scaleSize.
<br/><a href="./example/map11.html#-en" target="_blank">Baidu Migration (Simulation) » </a>
</td>
</tr>
<tr>
<td> <b>{Object}</b> itemStyle </td>
<td> {...} </td>
<td> style for markLine symbol, same as series' <a href="#Series">itemStyle</a> </td>
</tr>
<tr>
<td> <b>{Array}</b> data </td>
<td> [] </td>
<td> data of markLine symbol, see below. </td>
</tr>
</table>
<h5>series.markLine.data<a name="SeriesMarkLineData"> </a></h5>
<P> markLine data array. The most direct data items can directly specify the start and end position of markLine (x, y) and its relevant name and value. It's basically like this in pie, radar, force and chord: </P>
<div class="code">
<pre>data : [
[
{name: 'start of markLine1', value: 100, x: 50, y: 20},
{name: 'end of markLine1', x: 150, y: 120}
],
[
{name: 'start of markLine2', value: 200, x: 30, y: 80},
{name: 'end of markLine2', x: 270, y: 190}
],
...
]</pre>
</div>
<P> In Cartesian charts like line, bar, candlestick and scatter, directly specifying the location is not the only choice you've got. If you want to locate markLine by Cartesian system, you can make it via xAxis, yAxis. These two values ​​will, in accordance with the specific axis type and parameters passed in, make automatic convertions as follows: </P>
<div class="code">
<pre>data : [
[
{name: 'start of markLine1', value: 100, xAxis: 1, yAxis: 20}, // When xAxis is the category axis, value 1 will be understood as the index of the category axis. By xAxis: -1 | MAXNUMBER, markLine can reach the edge of the grid.
{name: 'end of markLine1', xAxis: 'Wednesday', yAxis: 20}, // When xAxis is the category axis, String 'Wednesday' will be understood as matching the category axis text.
],
[
{name: 'start of markLine2', value: 200, xAxis: 10, yAxis: 20}, // When xAxis/yAxis is the value axis, whatever passed in will be understood as a value and be conversed to location.
{name: 'end of markLine2', xAxis: 270, yAxis: 190}
],
...
]</pre>
</div>
<P> And the most practical bit is, in line, bar and scatter, you can directly use the following off-the-shelf special lines as markLines: </P>
<div class="code">
<pre>data : [
{type : 'max', name: 'custom name'}, // horizontal or vertical line of the maximum value
{type : 'min', name: 'custom name'}, // horizontal or vertical line of the minimum value
{type : 'average', name: 'custom name'},// horizontal or vertical line of the average value
// the line from minimum value to maximum value
[
{type : 'min', name: 'custom name'},
{type : 'max', name: 'custom name'}
],
// in scatter, there are two value axes. By default the special point is calculated through the y-axis value, you can specify x-axis special point via Index: 0.
{type : 'max', name: 'custom name', valueIndex:0}
]</pre>
<P> markLines are quite special and yet most commonly used in maps. In addition to direct location, if you want it to be based on geographic coordinates, and zoom with the map's scale roaming, you need to provide a geoCoord for markLine, as follows. </P>
<div class="code">
<pre>data : [
[
{name: '北京', value: 100},
{name:'上海'}
],
[
{name: '北京', value: 100},
{name:'广州'}
],
...
],
geoCoord : {
"北京":[116.46,39.92], // Supports array [longitude, latitude]
"广州":[113.23,23.16],
"上海": {x: 121.48, y: 31.22}, // Supports object {x: longitude, y: latitude}
...
}
</pre>
</div>
<h4>itemStyle<a name="ItemStyle"> </a></h4>
<P> shape style for items. Sets the default style and emphsis style (style when hovered)for items in the chart:</P>
<div class="code">
<pre>itemStyle: {
normal: {
...
},
emphasis: {
...
}
}
</pre>
</div>
<P> the normal property and emphasis property are objects. They include: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Type of application </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{color | Function}</b> color </td>
<td> varying according to chart types </td>
<td> universal </td>
<td> color, dominant color, function paramater is <br/>{seriesIndex:x, series:xxx, dataIndex:y, data:yyy}</td>
</tr>
<tr>
<td> <b>{Object}</b> lineStyle </td>
<td> varying according to chart types </td>
<td> line, candlestick, markLine</td>
<td> line style, see <a href="#LineStyle" title="">lineStyle</a>.</td>
</tr>
<tr>
<td> <b>{Object}</b> areaStyle </td>
<td> varying according to chart types </td>
<td> stacked line, map</td>
<td> area style, see <a href="#AreaStyle" title="">areaStyle</a>.</td>
</tr>
<tr>
<td> <b>{Object}</b> chordStyle </td>
<td> varying according to chart types </td>
<td> chord</td>
<td> chord style, see <a href="#ChordStyle" title="">chordStyle</a>. </td>
</tr>
<tr>
<td> <b>{Object}</b> nodeStyle </td>
<td> varying according to chart types </td>
<td> force</td>
<td> node style, see <a href="#NodeStyle" title="">nodeStyle</a>. </td>
</tr>
<tr>
<td> <b>{Object}</b> linkStyle </td>
<td> varying according to chart types </td>
<td> force</td>
<td> link style, see <a href="#LinkStyle" title="">linkStyle</a>. </td>
</tr>
<tr>
<td> <b>{string}</b> borderColor </td>
<td> varying </td>
<td> line (symbol), scatter (symbole), pie, map, markPoint</td>
<td> color of border. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> varying </td>
<td> line (symbol), scatter (symbole), pie, map, markPoint</td>
<td> width of column border, in px. </td>
</tr>
<tr>
<td> <b>{string}</b> barBorderColor </td>
<td> '#fff' </td>
<td> bar (column)</td>
<td> color of border. </td>
</tr>
<tr>
<td> <b>{number | Array}</b> barBorderRadius </td>
<td> 0 </td>
<td> bar (column)</td>
<td> radius of bar (column) border, in px, defaults to 0. can be Array to assign a radius to the 4 corners, such as [5, 5, 0, 0](clockwise as left-top, right-top, right-bottom, left-bottom)</td>
</tr>
<tr>
<td> <b>{number}</b> barBorderWidth </td>
<td> 0 </td>
<td> bar (column)</td>
<td> width of bar (column) border, in px, defaults to 0. </td>
</tr>
<tr>
<td> <b>{Object}</b> label </td>
<td><pre>{
show: true,
position:'outer'
} </pre></td>
<td> line, column, candlestick, scatter, pie, map, force, markPoint, markLine</td>
<td> In pie, displayed on the outside by default. labelLine.length controls the label's distance from the pie.
<br/>In funnel, displayed on the right by default. labelLine.length controls the label's distance from the funnel.
<br/>In map, the location of labels cannot be specified.
<br/> position can be specified in line, column, candlestick, scatter. See below.
</td>
</tr>
<tr>
<td> <b>{Object}</b> labelLine </td>
<td> {show: true} </td>
<td> pie, funnel </td>
<td> the visual guide of labels in pie. Defaults to show. </td>
</tr>
</table>
<P> label property is the object. It includes: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td> Specifies whether to show label. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{string}</b> position </td>
<td> 'outer' | null</td>
<td> the position to show label. Cannot be specified in maps.
<br/>In pie, valid values are: 'outer' | 'inner';
<br/>In funnel, valid value are: 'inner' | 'left' | 'right' (default)，
<br/>In line, column, candlestick and scatter, the default value is 'top' (for vertical layout) or 'right' (for horizontal layout). Can also be one of: 'inside' | 'left' | 'bottom';
<br/>In column, other possible values are: 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom'.
</td>
</tr>
<tr>
<td> <b>{boolean}</b> rotate </td>
<td> false </td>
<td> applicable to chord. Label rotates automatically. </td>
</tr>
<tr>
<td> <b>{number}</b> distance </td>
<td> 10 </td>
<td> In chord, Label's distance from chord after it rotates automatically.
<br/> In pie, this distance means the factor of label distance and pie radius(In ring chart, is sum of inner and outer radius), default to <b>0.5</b>.
</td>
</tr>
<tr>
<td> <b>{string | Function}</b> formatter </td>
<td> null </td>
<td> label text formatter, universal, same as <a href="#Tooltip" title="">Tooltip.formatter</a>, Supports template, method callback. Does not support asynchronous callback. </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> null </td>
<td> style for label text, (see <a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
<tr>
<td> <b>{Number}</b> x </td>
<td> varying </td>
<td> only in treemap，x-coordinate in px of text </td>
</tr>
<tr>
<td> <b>{Number}</b> y </td>
<td> varying </td>
<td> only in treemap，y-coordinate in px of text </td>
</tr>
</table>
<P> labelLine property is the object. It includes:</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{boolean}</b> show </td>
<td> true </td>
<td> Specifies whether to show labelLine. Valid values are: true (show) | false (hide). </td>
</tr>
<tr>
<td> <b>{number}</b> length </td>
<td> 40 </td>
<td> length of the line. Starts from the outer edge. Can be negative. In funnel, length can be 'auto'</td>
</tr>
<tr>
<td> <b>{Object}</b> lineStyle </td>
<td> varying </td>
<td> line style, see <a href="#LineStyle" title="">lineStyle</a>. </td>
</tr>
</table>
<P> By effectively setting the normal and emphasis options of itemStyle, you can personalize your display strategies. For example, if you want to have text labels in pie hidden by default, and a red visual guide displayed in the outer region of the pie when the mouse hovers over, you can try the following configuration: </P>
<div class="code">
<pre>itemStyle: {
normal: {
label: {
show: false
}
labelLine: {
show: false
}
} ,
emphasis: {
label: {
show: true,
position: &#39;outer&#39;
}
labelLine: {
show: true,
lineStyle: {
color: &#39;red&#39;
}
}
}
}
</pre>
</div>
<p>high customizability: </p>
<p>
line <a href="example/line.html#-en" target="_blank">try this »</a>,
column <a href="example/bar.html#-en" target="_blank">try this »</a>,
candlestick <a href="example/k.html#-en" target="_blank">try this »</a>,
scatter <a href="example/scatter.html#-en" target="_blank">try this »</a>,
pie <a href="example/pie.html#-en" target="_blank">try this »</a>，
chord <a href="example/chord.html#-en" target="_blank">try this »</a>,
force <a href="example/force1.html#-en" target="_blank">try this »</a>,
map <a href="example/map.html#-en" target="_blank">try this »</a>,
gauge <a href="example/gauge.html#-en" target="_blank">try this »</a>,
funnel <a href="example/funnel.html#-en" target="_blank">try this »</a>
</p>
<h4>lineStyle<a name="LineStyle"> </a></h4>
<P> style for line (line segment) </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{color}</b> color</td>
<td> varying </td>
<td> color </td>
</tr>
<tr>
<td> <b>{string}</b> type </td>
<td> 'solid' </td>
<td> line style. Valid values are: 'solid' | 'dotted' | 'dashed', and can be 'curve' | 'broken' in tree structures. </td>
</tr>
<tr>
<td> <b>{number}</b> width </td>
<td> varying </td>
<td> width of the line. </td>
</tr>
<tr>
<td> <b>{color=}</b> shadowColor </td>
<td> rgba(0,0,0,0) </td>
<td> applicable to the main line (in IE8+). Color of the shadow. Supports rgba. </td>
</tr>
<tr>
<td> <b>{number=}</b> shadowBlur </td>
<td> 5 </td>
<td> applicable to the main line (in IE8+). Blur degree of the shadow. Valid values are positive. </td>
</tr>
<tr>
<td> <b>{number=}</b> shadowOffsetX </td>
<td> 3 </td>
<td> applicable to the main line (in IE8+). Horizontal offset of the shadow. Right when positive, left when negative. </td>
</tr>
<tr>
<td> <b>{number=}</b> shadowOffsetY </td>
<td> 3 </td>
<td> applicable to the main line (in IE8+). Vertical offset of the shadow. Down when positive, up when negative. </td>
</tr>
</table>
<h4>areaStyle<a name="AreaStyle"> </a></h4>
<P> fill style for area </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{color}</b> color</td>
<td> varying </td>
<td> color </td>
</tr>
<tr>
<td> <b>{string}</b> type </td>
<td> 'default' </td>
<td> Fill style, currently only supports 'default' (solid fill). </td>
</tr>
</table>
<h4>chordStyle<a name="ChordStyle"> </a></h4>
<P> chord style for the chord chart </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{number}</b> width</td>
<td>1</td>
<td>Width of bezier curve, Only available when ribbonType is false</td>
</tr>
<tr>
<td> <b>{string}</b> color</td>
<td>1</td>
<td>Color of bezier curve, Only available when ribbonType is false</td>
</tr>
<tr>
<td> <b>{string}</b> borderWidth</td>
<td>1</td>
<td>Border width of ribbon shape, Only available when ribbonType is true</td>
</tr>
<tr>
<td> <b>{string}</b> borderColor</td>
<td>1</td>
<td>Border color of ribbon shape, Only available when ribbonType is true</td>
</tr>
</table>
<h4>nodeStyle<a name="NodeStyle"> </a></h4>
<P> node style for the force-directed chart </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{color}</b> color</td>
<td> '#f08c2e' </td>
<td> fill color. </td>
</tr>
<tr>
<td> <b>{color}</b> borderColor</td>
<td> '#5182ab' </td>
<td> stroke color. </td>
</tr>
<tr>
<td> <b>{number}</b> borderWidth </td>
<td> 1 </td>
<td> width of the stroke line. </td>
</tr>
</table>
<h4>linkStyle<a name="LinkStyle"> </a></h4>
<P> link style for the force-directed chart </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> type</td>
<td> 'line' </td>
<td> line style, can be: 'curve' | 'line' </td>
</tr>
<tr>
<td> <b>{color}</b> color</td>
<td> '#5182ab' </td>
<td> color of the line </td>
</tr>
<tr>
<td> <b>{number}</b> width</td>
<td> 1 </td>
<td> width of the line </td>
</tr>
</table>
<h4>textStyle<a name="TextStyle"> </a></h4>
<P> text style </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{color}</b> color</td>
<td> varying </td>
<td> color </td>
</tr>
<tr>
<td> <b>{string}</b> decoration </td>
<td> 'none' </td>
<td> decoration. Applicable to tooltip.textStyle only. </td>
</tr>
<tr>
<td> <b>{string}</b> align </td>
<td> varying </td>
<td> horizontal alignment. Valid values are: 'left' | 'right' | 'center'. </td>
</tr>
<tr>
<td> <b>{string}</b> baseline </td>
<td> varying </td>
<td> vertical alignment. Valid values are: 'top' | 'bottom' | 'middle'. </td>
</tr>
<tr>
<td> <b>{string}</b> fontFamily </td>
<td> 'Arial, Verdana, sans-serif'</td>
<td> font family. </td>
</tr>
<tr>
<td> <b>{number}</b> fontSize </td>
<td> 12</td>
<td> font size, in px. </td>
</tr>
<tr>
<td> <b>{string}</b> fontStyle </td>
<td> 'normal'</td>
<td> font style. Valid values are: 'normal' | 'italic' | 'oblique'. </td>
</tr>
<tr>
<td> <b>{string | number}</b> fontWeight </td>
<td> 'normal'</td>
<td> font weight. Valid values are: 'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900. </td>
</tr>
</table>
<h4>loadingOption<a name="Loadingoption"> </a></h4>
<P> The loading options control the appearance of the loading screen that covers the plot area on chart operations. <a href="example/loading.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> text </td>
<td> '数据读取中...' </td>
<td> The loading text that appears when the chart is set into the loading state. \n' represents a line feed. </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'center' </td>
<td> horizontal position. Defaults to center. Valid values are: 'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'center' </td>
<td> vertical position. Defaults to center. Valid values are: 'center' | 'bottom' | 'top' | <b>{number}</b>(y-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> null </td>
<td> style for the loading text, (see <a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
<tr>
<td> <b>{string | Function}</b> effect </td>
<td> 'spin' </td>
<td> loading effect. Valid values are: 'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'. Supports external loading. </td>
</tr>
<tr>
<td> <b>{Object}</b> effectOption </td>
<td> null </td>
<td> option for loading effect, see zrender. </td>
</tr>
<tr>
<td> <b>{number}</b> progress </td>
<td> null </td>
<td> Specifies the current progress [0~1]. Applicable to specific effects. </td>
</tr>
</table>
<h4>noDataLoadingOption<a name="NoDataLoadingOption"> </a></h4>
<P> The loading options for none data control the appearance of the loading screen that covers the plot area on chart operations. <a href="example/loading.html#-en" target="_blank">Try this »</a></P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> text </td>
<td> '暂无数据' </td>
<td> The loading text that appears when the chart is set into the loading state. \n' represents a line feed. </td>
</tr>
<tr>
<td> <b>{string | number}</b> x </td>
<td> 'center' </td>
<td> horizontal position. Defaults to center. Valid values are: 'center' | 'left' | 'right' | <b>{number}</b>(x-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{string | number}</b> y </td>
<td> 'center' </td>
<td> vertical position. Defaults to center. Valid values are: 'center' | 'bottom' | 'top' | <b>{number}</b>(y-coordinate, in px). </td>
</tr>
<tr>
<td> <b>{Object}</b> textStyle </td>
<td> null </td>
<td> style for the loading text, (see <a href="#TextStyle" title="">textStyle</a>). </td>
</tr>
<tr>
<td> <b>{string | Function}</b> effect </td>
<td> 'bubble' </td>
<td> loading effect. Valid values are: 'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'. Supports external loading. </td>
</tr>
<tr>
<td> <b>{Object}</b> effectOption </td>
<td> null </td>
<td> option for loading effect, see zrender. </td>
</tr>
<tr>
<td> <b>{number}</b> progress </td>
<td> null </td>
<td> Specifies the current progress [0~1]. Applicable to specific effects. </td>
</tr>
</table>
<h4>backgroundColor<a name="BackgroundColor"> </a></h4>
<P>
<b>{color}</b> Null. The background color or gradient for the outer chart area. Defaults to null. Same as 'rgba(0,0,0,0)'.
</P>
<h4>color<a name="Color"> </a></h4>
<P>
<b>{Array}</b> [
<br/>&nbsp;&nbsp;&nbsp;&nbsp;'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
<br/>&nbsp;&nbsp;&nbsp;&nbsp;'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
<br/>&nbsp;&nbsp;&nbsp;&nbsp;'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
<br/>&nbsp;&nbsp;&nbsp;&nbsp;'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
<br/>], An array containing the default colors. When all colors are used, new colors are pulled from the start again.
</P>
<h4>symbolList<a name="SymbolList"> </a></h4>
<P>
<b>{Array}</b> [
<br/>&nbsp;&nbsp;&nbsp;&nbsp;'circle', 'rectangle', 'triangle', 'diamond',
<br/>&nbsp;&nbsp;&nbsp;&nbsp;'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
<br/>], An array containing the default symbols. When all symbols are used, new symbols are pulled from the start again.
</P>
<h4>renderAsImage<a name="RenderAsImage"> </a></h4>
<P> {boolean | string} false, supports render as image in non-IE8- browsers, can be set to true or specify image formats (png | jpeg). After rendered as image, the instance is still available (such as setOption, resize, etc.), but its various interactions will become invalid. </P>
<h4>calculable<a name="Calculable"> </a></h4>
<P> <b>{boolean}</b> false, specifies whether the drag-recalculate feature will be enabled, defaults to false. </P>
<h4>calculableColor<a name="CalculableColor"> </a></h4>
<P> <b>{color}</b> 'rgba(255,165,0,0.6)', color of border around drag-recalculate. </P>
<h4>calculableHolderColor<a name="CalculableHolderColor"> </a></h4>
<P> <b>{color}</b> '#ccc', color of calculable holder.</P>
<h4>nameConnector<a name="NameConnector"> </a></h4>
<P> <b>{string}</b> ' &amp; ', a connector that links the names of data series together after the combination of data series. </P>
<h4>valueConnector<a name="ValueConnector"> </a></h4>
<P> <b>{string}</b> ' : ', a connector that links the name of data series with value when island appears after the combination of data series. </P>
<h4>animation<a name="Animation"> </a></h4>
<P> <b>{boolean}</b> true, specifies whether the initial animation will be enabled, defaults to true. It is suggested to disable the initial animation in IE8-. </P>
<h4>addDataAnimation<a name="AddDataAnimation"> </a></h4>
<P> <b>{boolean}</b> true, specifies whether the dynamic data interface animation will be enabled, defaults to true. It is suggested to disable animation in IE8-. </P>
<h4>animationThreshold<a name="AnimationThreshold"> </a></h4>
<P> <b>{number}</b> 2500, threshold of animated elements. No animation if the graphic elements generated are over 2500. It is suggested to disable animation in IE8-. </P>
<h4>animationDuration<a name="AnimationDuration"> </a></h4>
<P> <b>{number}</b> 2000, duration of the enter animation, in ms. </P>
<h4>animationDurationUpdate<a name="animationDurationUpdate"> </a></h4>
<P> <b>{number}</b> 500，duration of the update animation, in ms.</P>
<h4>animationEasing<a name="AnimationEasing"> </a></h4>
<P> <b>{string}</b> 'BounceOut', easing effect of the main element. Supports multi-level control. See <a href="http://ecomfe.github.io/zrender/doc/doc.html#animation.easing" target="_blank">zrender.animation.easing</a>. Possible values are: <br/>
'Linear',<br/>
'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',<br/>
'CubicIn', 'CubicOut', 'CubicInOut',<br/>
'QuarticIn', 'QuarticOut', 'QuarticInOut',<br/>
'QuinticIn', 'QuinticOut', 'QuinticInOut',<br/>
'SinusoidalIn', 'SinusoidalOut', 'SinusoidalInOut',<br/>
'ExponentialIn', 'ExponentialOut', 'ExponentialInOut',<br/>
'CircularIn', 'CircularOut', 'CircularInOut',<br/>
'ElasticIn', 'ElasticOut', 'ElasticInOut',<br/>
'BackIn', 'BackOut', 'BackInOut',<br/>
'BounceIn', 'BounceOut', 'BounceInOut'<br/>
</P>
<h4>Graph data structure<a name="GraphDataStructure"> </a></h4>
<p>Force and chord use graph to represent the data. You can put the nodes(vertices) of graph in a nodes or data property. put the links(edges) of graph in a links or matrix property. In addition, each node can have a category property.</p>
<h5>categories<a name="categories"></a></h5>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td></td>
<td> Name of category </td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td> 'circle' </td>
<td> See <a href="#SeriesCartesian" title="">series (Cartesian)</a></td>
</tr>
<tr>
<td> {number | Array} symbolSize </td>
<td></td>
<td> Size of symbol </td>
</tr>
<tr>
<td> itemStyle </td>
<td></td>
<td> see <a href="#ItemStyle">itemStyle</a>. Notice that itemStyle in thecategory of force has no nodeStyle under the normal(emphasis) option. Instead itemStyle.normal(emphasis).color|borderWidth|borderColor will be used</td>
</tr>
</table>
<h5>nodes(data)<a name="nodes(data)"></a></h5>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Property </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b> name </td>
<td></td>
<td> Name of node </td>
</tr>
<tr>
<td> <b>{string}</b> label </td>
<td></td>
<td> Label name of the node, name(above) as default. </td>
</tr>
<tr>
<td> <b>{number}</b> value </td>
<td> </td>
<td> Value of name </td>
</tr>
<tr>
<td> {boolean} ignore </td>
<td>false</td>
<td>If ignore the node</td>
</tr>
<tr>
<td> <b>{string}</b> symbol </td>
<td>'circle' </td>
<td> See <a href="#SeriesCartesian" title="">series (Cartesian)</a></td>
</tr>
<tr>
<td> {number | Array} symbolSize </td>
<td></td>
<td> Size of symbol </td>
</tr>
<tr>
<td> {number} category </td>
<td>0</td>
<td> Category index of node </td>
</tr>
<tr>
<td> itemStyle </td>
<td></td>
<td> see <a href="#ItemStyle">itemStyle</a>. Notice that itemStyle in a single node of force has no nodeStyle under the normal(emphasis) option. Instead itemStyle.normal(emphasis).color|borderWidth|borderColor will be used</td>
</tr>
</table>
<h5>links<a name="GraphLinks"></a></h5>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> name </th>
<th> Default </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string|number}</b> source </td>
<td></td>
<td> Index or name of source node </td>
</tr>
<tr>
<td> <b>{string|number}</b> target </td>
<td></td>
<td> Index or name of target node </td>
</tr>
<tr>
<td> <b>{number}</b> weight </td>
<td> 1 </td>
<td> Weight of link </td>
</tr>
<tr>
<td> itemStyle </td>
<td></td>
<td> see <a href="#LinkStyle">linkStyle</a> </td>
</tr>
</table>
<h5>matrix<a name="GraphMatrix"></a></h5>
<p>Adjacency matrix of graph</p>
<h4>Multi-Level Control<a name="Multi-Level-Control"> </a></h4>
<P> For shortness' sake, you can fulfill different levels of custom needs by these three levels: </P>
<ul>
<li>through option.*, set the global unified configuration;</li>
<li>through option.series.*, set special configuration for some specific series. It has a higher priority than the configuration with the same name in option.*;</li>
<li>through option.series.data.*, set special configuration for some specific data. It has the highest priority of all. </li>
</ul>
<p><img src="./asset/img/doc/multiControl.jpg" title="" alt="multi-level control"/></P>
<h3>Appendix: Map Extension<a name="Appendix-Map-Extension"> </a></h3>
<p>BMap which is base on map.baidu.com, see
<a href="../extension/BMap/doc/doc.html" target="_blank">doc</a>,
<a href="../extension/BMap/doc/BMap.html" target="_blank">example1</a>,
<a href="../extension/BMap/doc/example.html" target="_blank">example2</a>,
by <a href="http://weibo.com/wind108369" target="_blank">Ji Yang</a>.
</p>
<p>Supports extended map on <a href='http://www.oschina.net/translate/geojson-spec?cmp' target="_blank">GeoJson</a> format. Try <a href="./example/map6.html#-en" target="_blank">HK 》</a> <a href="./example/map7.html#-en" target="_blank">USA 》</a></p>
<div class="code">
<pre>
// step1: find the geoJson data file in the target region, like HK_geo.json.
// step2: name your map type in require('echarts/util/mapData/params'), like HK.
// step3: implement the getGeoJson interface method, return the geoJson data file in the target region via callback.
require('echarts/util/mapData/params').params.HK = {
getGeoJson: function (callback) {
$.getJSON('geoJson/HK_geo.json',callback);
}
}
// step3*: In most cases, data maps do not need any special projection algorithm. ECharts uses a simplified projection algorithm, thus some regions may need to be manually adjusted. Through specialArea, you can specify the latitude and longitude coordinates and interval size of some regions, such as:
require('echarts/util/mapData/params').params.USA = {
getGeoJson: function (callback) {
$.getJSON('geoJson/USA_geo.json', callback);
},
specialArea : {
Alaska : { // Move Alaska to the bottom left of the American main continent
left : -131, // Starting point of placement: 13 degrees west longitude
top : 31, // Starting point of placement: 31 degrees north latitude
width : 15, // Size, width and height of the interval are no more than 15 degrees
height : 15
},
Hawaii : {
left : -112, // Hawaii
top : 29,
width : 5,
height : 5
},
'Puerto Rico' : { // Puerto Rico
left : -76,
top : 26,
width : 2,
height : 2
}
}
}
// step4: Echarts already has this map type, you can use it in the option.
option.series = [
{
type: 'map',
mapType: 'HK', // Custom extended chart types
...
}
]
</pre>
</div>
<h3>Appendix: Component and Chart Instances<a name="Appendix-Component-and-Chart-Instances"> </a></h3>
<p>In order to enhance features and customizability, ECharts team made ​​a difficult decision: open interface instances of components and charts. All these components and charts interfaces are mounted on instances got by init(eg: myChart), and stored in chart and component respectively. For example, you can obtain the current map instance via myChart.chart.map, and read and call all the properties and methods inside it. </p>
<p><b style="color:red">【Important】</b>Please note: ECharts interfaces are designed on a data-driven basis, not designed for open purposes. It is true that you are allowed to access to it unlimitedly, or even rewrite it dynamically, but it's also true that these actions may affect the chart's performance or compatibility when the version is upgraded. So we only listed the following methods and properties as the reference (or limit). We will do our best to ensure the stability and backward compatibility of these methods or properties, and we promise to release a notice on changelog should there be any incompatible update. However, if you use any method or property that is not listed below, you will not get the guarantee. Sorry for the trouble. </p>
<h4>Appendix: Component Instances<a name="Appendix-Component-Instances"> </a></h3>
<p>The components of ECharts include: timeline, title, legend, dataRange, toolbox, tooltip, dataZoom, grid, xAxis, yAxis, polar. </p>
<h4>timeline<a name="TimelineInterface"> </a></h4>
<P>timeline. At most one timeline is allowed in one chart. Methods and properties available are:</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_TIMELINE. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> play</td>
<td> play
<br/>parameters: <b>{number=}</b> index， <b>{boolean=}</b> autoPlay, (see below).
<br/>Return value: <b>{number}</b> currentIndex, index to the position of the options array that is currently playing.
<br/>index: specifies the index to the position of the options array that needs to be played. If unspecified, start to play from the current index.
<br/>autoPlay: specifies whether to play automatically. If unspecified, play automatically.
</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> stop</td>
<td> pause
<br/>parameters: null
<br/>Return value: <b>{number}</b> currendIndex, index to the position of the options array that is currently playing.
</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> next</td>
<td> next
<br/>parameters: null
<br/>Return value: <b>{number}</b> currendIndex index to the position of the options array that is currently playing.
</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> last</td>
<td> last
<br/>parameters: null
<br/> Return value: <b>{number}</b> currendIndex, index to the position of the options array that is currently playing.
</td>
</tr>
</table>
<h4>tooltip<a name="TooltipInterface"> </a></h4>
<P> tooltip, a small "hover box" with detailed information about the item being hovered over. At most one tooltip is allowed in one chart. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_LEGEND. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> showTip</td>
<td> show the tooltip. <br/>Parameter: <b>{Object}</b> param (see below) <br/> Return value: null
<br/>parameter format: { seriesIndex: 0, seriesName:'', dataIndex:0 } // line, bar, scatter, candlestick, radar, dataIndex is required, specify seriesIndex or seriesName is the same
<br/>parameter format: { seriesIndex: 0, seriesName:'', name:'' } // map, pie, chord, dataIndex is required, specify seriesIndex or seriesName is the same
</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> hideTip</td>
<td> hide the tooltip. <br/>parameters: null<br/> Return value: null</td>
</tr>
</table>
<h4>legend<a name="LegendInterface"> </a></h4>
<P> Legend, At most one legend is allowed in one chart. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_LEGEND. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> isSelected</td>
<td> relevant to legend switch, determines whether the name passed in is currently turned on. <br/>Parameters: <b>{string}</b> name <br/> Return value: <b>{boolean}</b>. If true, it's on; if false, it's off.</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getSelectedMap</td>
<td> relevant to legend switch, gets the off and on states of all the current legend switches. <br/>Parameters: null <br/>Return value: <b>{Object}</b> {name:value}. If true, it's on; if false, it's off. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getColor</td>
<td> relevant to legend color, gets the color corresponding to the name passed in. If the name is not included in the existing data item of the legend, a new color will be generated to match the name and the color will be returned. <br/>Parameters: <b>{string}</b> name <br/> Return value: <b>{color}</b> matched color</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> setColor</td>
<td> relevant to legend color, sets the color corresponding to some series (data). When the color is changed, the chart will not automatically refresh; call the refresh method of the instance if you need to get the chart updated.
<br/>Parameters: <b>{string}</b> name, <b>{color}</b> matched color <br/> Return value: null</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> setSelected</td>
<td> sets the selection mode of some series (data).
<br/>Parameters: <b>{string}</b> name, <b>{boolean}</b> status <br/> Return value: null</td>
</tr>
</table>
<h4>dataRange<a name="DataRangeInterface"> </a></h4>
<P> dataRange, at most one dataRange control is allowed in one chart. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_DATARANGE. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getColor</td>
<td> relevant to color of the dataRange control, gets the color corresponding to the name passed in. <br/>Parameters: <b>{number}</b> value <br/> Return value: <b>{color}</b> matched color </td>
</tr>
</table>
<p><img src="./asset/img/doc/dataRange.png" title="" alt="dataRange"/></P>
<h4>dataZoom<a name="DataZoomInterface"> </a></h4>
<P>dataZoom interface. Synchronized with toolbox.feature.dataZoom. Applicable to Cartesian chart only. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_DATAZOOM </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> absoluteZoom</td>
<td> dataZoom. <br/>Parameters: <b>{Object}</b> {start : value, end : value, start2 : value, end2 : value} (zoom parameters). <br/> Return value: null. Role: change the data display area according to the value passed in. The valid range is [0,100]. In most cases, you just need to specify the start and end of dataZoom in the primary region. In scatter, you can use dataZoom in two dimensions simultaneously, via additionally specifying start2, end2. </td>
</tr>
</table>
<p><img src="./asset/img/doc/dataZoom.png" title="" alt="数据区域缩放"/></P>
<h4>grid<a name="GridInterface"> </a></h4>
<P>grid. Methods and properties available are:</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_GRID. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getX</td>
<td> abscissa of the grid's upper left corner, in px. <br/>Parameters: null. <br/> Return value: <b>{number}</b> coordinate value</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getXend</td>
<td> abscissa of the grid's lower right corner, in px. <br/>Parameters: null. <br/> Return value: <b>{number}</b> coordinate value</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getY</td>
<td> ordinate of the grid's upper left corner, in px. <br/>Parameters: null. <br/> Return value: <b>{number}</b> coordinate value</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getYend</td>
<td> ordinate of the grid's lower right corner, in px.<br/>Parameters: null. <br/> Return value: <b>{number}</b> coordinate value</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getWidth</td>
<td> the width of the grid, in px. <br/>Parameters: null. <br/> Return value: <b>{number}</b> width value</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getHeight</td>
<td> the height of the grid, in px. <br/>Parameters: null. <br/> Return value: <b>{number}</b> height value</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getArea</td>
<td> the area data of the grid. Equal to all the return values of getX, getY, getWidth, getHeight. <br/>Parameters: null. <br/> Return value: <b>{Object}</b> {x : value, y : value, width : value, height : value}</td>
</tr>
</table>
<p><img src="./asset/img/doc/grid.jpg" title="" alt="grid"/></P>
<h4>xAxis/yAxis<a name="AxisInterface"> </a></h4>
<P>horizontal/vertical axis. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getAxis</td>
<td> Gets the axis instance of the index passed in. There are at most four axes (to the side, or up, or down) in a Cartesian chart. Axes can be either category axis or value axis. For the axis instance and available axis methods, see the section below. <br/>Parameters: <b>{number}</b> 0/1 (axis index)<br/> Return value: {categoryAxis | valueAxis}, specifies the axis instance of the index. It can be either category axis or value axis. </td>
</tr>
</table>
<h4>categoryAxis<a name="CategoryAxisInterface"> </a></h4>
<P>category axis. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_AXIS_CATEGORY. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getCoord</td>
<td> calculates the drawing position according to the value of category name, in px. <br/>Parameters: <b>{string}</b> name <br/> Return value: <b>{number}</b> coordinate value. If there are category values with the same name, return the value that is matched first. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getCoordByIndex</td>
<td> calculates the drawing position according to the category axis data index, in px. <br/>Parameters: <b>{number}</b> index <br/> Return value: <b>{number}</b> coordinate value. When the index is less than 0, return the starting point of the coordinate; when the index is greater than the length of the category, return the end point of the coordinate. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getNameByIndex</td>
<td> calculates the category axis name according to the category axis data index. <br/>Parameters: <b>{number}</b> index <br/> Return value: <b>{string}</b> name</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getIndexByName</td>
<td> calculates the category axis data index according to the category axis name. <br/>Parameters: <b>{string}</b> name <br/> Return value: <b>{number}</b>Index. If there are category values with the same name, return the value that is matched first. </td>
</tr>
</table>
<h4>valueAxis<a name="ValueAxisInterface"> </a></h4>
<P>value axis. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_AXIS_VALUE. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getCoord</td>
<td> calculates the drawing position according to the value, in px. <br/>Parameters: <b>{number}</b> value <br/>Return value: <b>{number}</b> coordinate value</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getExtremum</td>
<td> returns the extremes of the current axis. <br/>Parameters: null，<br/> Return value: <b>{Object}</b> {min:{number}, max:{number}}</td>
</tr>
</table>
<h4>polar<a name="PolarInterface"> </a></h4>
<P>polar coordinates. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> component type, equal to config.COMPONENT_TYPE_POLAR. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getVector</td>
<td>Gets the coordinates corresponding to some value in each indicator, in px. <br/>Parameters: <b>{number}</b> polarIndex, <b>{number}</b> indicatorIndex, <b>{number}</b> value <br/> Return value: <b>{Array}</b> [x, y] coordinate value</td>
</tr>
</table>
<h4>Appendix: Chart Instances<a name="Appendix-Chart-Instances"> </a></h3>
<p>Chart types supported in ECharts include: line, bar, scatter, candlestick, pie, radar, chord, force, map. </p>
<h4>map<a name="MapInterface"> </a></h4>
<P>map. Methods and properties available are: </P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> Type </th>
<th> Name </th>
<th> Description </th>
</tr>
<tr>
<td> <b>{string}</b></td>
<td> type </td>
<td> chart type, equal to config.CHART_TYPE_MAP. </td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getPosByGeo</td>
<td> Converts geographic coordinates to plane coordinates, in px. <br/>Parameters: <b>{string}</b> mapType (map type), <b>{Array}</b> [ew,ns] (geographic coordinates)<br/> Return value: <b>{Array}</b> [x, y] (plane coordinates).</td>
</tr>
<tr>
<td> <b>{Function}</b></td>
<td> getGeoByPos</td>
<td> Converts plane coordinates to geographic coordinates, in px. <br/>Parameters: <b>{string}</b> mapType (map type), <b>{Array}</b> [x, y] (plane coordinates) <br/> Return value: <b>{Array}</b> [ew,ns] (geographic coordinates). </td>
</tr>
</table>
<h3>Appendix: an Intuitive Example<a name="Appendix-an-Intuitive-Example"> </a></h3>
<p>For more examples, click <a href="example-en.html" target="_blank">example</a>. Use this <a href="example/demo.html#-en" target="_blank">demo</a> or <a href="example/www/index.html" target="_blank">ECharts single file import</a> as your template. </p>
<div class="code" style="margin-bottom: 25px;">
<pre style="margin-bottom: 0;">// instantiate the chart------------------
// script plain import
var myChart = echarts.init(document.getElementById('main'));
// loading---------------------
myChart.showLoading({
text: &#39;We're building the buildings as fast as we can...please wait! &#39;, //loading text
});
// ajax getting data...............
// ajax callback
myChart.hideLoading();
// use the chart-------------------
var option = {
legend: { // legend configuration
padding: 5, // The inner padding of the legend, in px, defaults to 5. Can be set as array - [top, right, bottom, left].
itemGap: 10, // The pixel gap between each item in the legend. It is horizontal in a legend with horizontal layout, and vertical in a legend with vertical layout.
data: ['ios', 'android']
},
tooltip: { // tooltip configuration
trigger: 'item', // trigger type. Defaults to data trigger. Can also be: 'axis'
},
xAxis: [ // The horizontal axis in Cartesian coordinates
{
type: 'category', // Axis type. xAxis is category axis by default. As for value axis, please refer to the 'yAxis' chapter.
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ // The vertical axis in Cartesian coordinates
{
type: 'value', // Axis type. yAxis is value axis by default. As for category axis, please refer to the 'xAxis' chapter.
boundaryGap: [0.1, 0.1], // Blank border on each side of the coordinate axis. Value in the array represents percentage.
splitNumber: 4 // Applicable to value axis. The number of segments. Defaults to 5.
}
],
series: [
{
name: 'ios', // series name
type: 'line', // chart type, line, scatter, bar, pie, radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
},
{
name: 'android', // series name
type: 'line', // chart type, line, scatter, bar, pie, radar
data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
}
]
};
myChart.setOption(option);
...
// Add some data------------------
option.legend.data.push('win&#39);
option.series.push({
name: 'win', // series name
type: 'line', // chart type, line, scatter, bar, pie, radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);
...
// Clear the chart-------------------
myChart.clear();
// Dispose the chart-------------------
myChart.dispose();
</pre>
</div> </div>
</div>
</div>
</div><!--/.fluid-container-->
<!-- FOOTER -->
<footer id="footer"></footer>
<script src="./asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
<script src="./asset/js/bootstrap.min.js"></script>
<script src="asset/js/echartsConfig.js"></script>
<script src="asset/js/echartsDoc.js"></script>
</body>
</html>