<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; just configure the packet 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 <ahref="https://github.com/ecomfe/zrender"target="_blank">ZRender</a> locally. Reference is made to <ahref="example/demo.html"target="_blank">demo</a>. Now you need to configure as follows.</p>
<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; just configure the packet 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 <ahref="https://github.com/ecomfe/zrender"target="_blank">ZRender</a> locally. Reference is made to <ahref="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>
<divclass="code">
<pre>//from echarts example
...
...
@@ -672,7 +672,7 @@ require(['echarts'], function (ec){
<br/>Add multiple sets of data:
<br/><b>{Array}</b> params
</td>
<td>Dynamic data interface. <ahref="example/dynamicLineBar.html"target="_blank">Try this (Line & Bar) »</a><ahref="example/dynamicScatterK.html"target="_blank">Try this (Scatter & Candlestick) »</a><ahref="example/dynamicPieRadar.html"target="_blank">Try this (Pie & Radar) »</a>
<td>Dynamic data interface. <ahref="example/dynamicLineBar.html#-en"target="_blank">Try this (Line & Bar) »</a><ahref="example/dynamicScatterK.html#-en"target="_blank">Try this (Scatter & Candlestick) »</a><ahref="example/dynamicPieRadar.html#-en"target="_blank">Try this (Pie & 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.
...
...
@@ -731,7 +731,7 @@ require(['echarts'], function (ec){
@@ -750,7 +750,7 @@ require(['echarts'], function (ec){
<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:
@@ -761,7 +761,7 @@ require(['echarts'], function (ec){
<tr>
<td><b>{self}</b> showLoading</td>
<td><b>{Object}</b> loadingOption</td>
<td>Option for the loading screen, (see <ahref="#Loadingoption"title="">loadingOption</a>), show a loading label text. <ahref="example/loading.html"target="_blank">try this »</a></td>
<td>Option for the loading screen, (see <ahref="#Loadingoption"title="">loadingOption</a>), show a loading label text. <ahref="example/loading.html#-en"target="_blank">try this »</a></td>
</tr>
<tr>
<td><b>{self}</b> hideLoading</td>
...
...
@@ -904,7 +904,7 @@ require(['echarts'], function (ec){
<h4>timeline<aname="Timeline"></a></h4>
<tablecellspacing="0"class="ADoc_table full">
<P> timeline, at most one timeline control is allowed in one chart. Try <ahref="./example/bar11.html"target="_blank">bar »</a>, <ahref="./example/scatter4.html"target="_blank">scatter »</a>, <ahref="./example/pie7.html"target="_blank">pie »</a>, <ahref="./example/map14.html"target="_blank">map »</a></P>
<P> timeline, at most one timeline control is allowed in one chart. Try <ahref="./example/bar11.html#-en"target="_blank">bar »</a>, <ahref="./example/scatter4.html#-en"target="_blank">scatter »</a>, <ahref="./example/pie7.html#-en"target="_blank">pie »</a>, <ahref="./example/map14.html#-en"target="_blank">map »</a></P>
<tablecellspacing="0"class="ADoc_table full">
<tr>
<th> Property </th>
...
...
@@ -1178,7 +1178,7 @@ require(['echarts'], function (ec){
<h4>toolbox<aname="Toolbox"></a></h4>
<P> Toolbox, at most one toolbox is allowed in one chart. <ahref="example/toolbox.html"target="_blank">Try this »</a></P>
<P> Toolbox, at most one toolbox is allowed in one chart. <ahref="example/toolbox.html#-en"target="_blank">Try this »</a></P>
<tablecellspacing="0"class="ADoc_table full">
<tr>
<th> Property </th>
...
...
@@ -1311,7 +1311,7 @@ require(['echarts'], function (ec){
}
}
</pre></td>
<td> Currently toolbox supports all the features listed below. For custom features, <ahref="example/toolbox.html"target="_blank"> try this »</a>
<td> Currently toolbox supports all the features listed below. For custom features, <ahref="example/toolbox.html#-en"target="_blank"> try this »</a>
@@ -1357,7 +1357,7 @@ require(['echarts'], function (ec){
<h4>tooltip<aname="Tooltip"></a></h4>
<P> Tooltip, a small "hover box" with detailed information about the item being hovered over. <ahref="example/tooltip.html"target="_blank">Try this »</a></P>
<P> Tooltip, a small "hover box" with detailed information about the item being hovered over. <ahref="example/tooltip.html#-en"target="_blank">Try this »</a></P>
<tablecellspacing="0"class="ADoc_table full">
<tr>
<th> Property </th>
...
...
@@ -1455,7 +1455,7 @@ require(['echarts'], function (ec){
<td> style for the tooltip text. Defaults to white, (see <ahref="#TextStyle"title="">textStyle</a>). </td>
</tr>
</table>
<P> content formatter:<ahref="example/tooltip.html"target="_blank">Try this »</a></P>
<P> content formatter:<ahref="example/tooltip.html#-en"target="_blank">Try this »</a></P>
<ul>
<li>
<b>{string}</b>, Template, its variables are:
...
...
@@ -1507,7 +1507,7 @@ require(['echarts'], function (ec){
<h4>legend<aname="Legend"></a></h4>
<P> legend, at most one legend is allowed in one chart. <ahref="example/legend.html"target="_blank">Try this »</a></P>
<P> legend, at most one legend is allowed in one chart. <ahref="example/legend.html#-en"target="_blank">Try this »</a></P>
<tablecellspacing="0"class="ADoc_table full">
<tr>
<th> Property </th>
...
...
@@ -1582,7 +1582,7 @@ require(['echarts'], function (ec){
<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, <ahref="example/legend.html"target="_blank">try this »</a></td>
<td> The default selected state, can be used to conduct dynamic data loading with LEGEND.SELECTED event, <ahref="example/legend.html#-en"target="_blank">try this »</a></td>
</tr>
<tr>
<td><b>{Array}</b> data </td>
...
...
@@ -1597,7 +1597,7 @@ require(['echarts'], function (ec){
<P> dataRange, at most one dataRange control is allowed in one chart. <ahref="example/dataRange.html"target="_blank">Try this »</a></P>
<P> dataRange, at most one dataRange control is allowed in one chart. <ahref="example/dataRange.html#-en"target="_blank">Try this »</a></P>
<tablecellspacing="0"class="ADoc_table full">
<tr>
<th> Property </th>
...
...
@@ -1692,7 +1692,7 @@ require(['echarts'], function (ec){
<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. <ahref="example/dataRange.html"target="_blank">Try this »</a></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. <ahref="example/dataRange.html#-en"target="_blank">Try this »</a></td>
</tr>
<tr>
<td><b>{Array}</b> text </td>
...
...
@@ -1709,7 +1709,7 @@ require(['echarts'], function (ec){
<h4>dataZoom<aname="DataZoom"></a></h4>
<P> dataZoom. Synchronized with toolbox.feature.dataZoom. Applicable to Cartesian chart only. <ahref="example/dataZoom.html"target="_blank">Try this »</a></P>
<P> dataZoom. Synchronized with toolbox.feature.dataZoom. Applicable to Cartesian chart only. <ahref="example/dataZoom.html#-en"target="_blank">Try this »</a></P>
<tablecellspacing="0"class="ADoc_table full">
<tr>
<th> Property </th>
...
...
@@ -1800,7 +1800,7 @@ require(['echarts'], function (ec){
<P> Zoom and roam controller for the map. <ahref="example/map1.html"target="_blank">try this »</a></P>
<P> Zoom and roam controller for the map. <ahref="example/map1.html#-en"target="_blank">try this »</a></P>
<tablecellspacing="0"class="ADoc_table full">
<tr>
<th> Property </th>
...
...
@@ -1947,7 +1947,7 @@ require(['echarts'], function (ec){
<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>
</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. <ahref="example/axis.html"target="_blank">Try this »</a></P>
<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. <ahref="example/axis.html#-en"target="_blank">Try this »</a></P>
<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'.
line <ahref="example/line.html"target="_blank">try this »</a>,
column <ahref="example/bar.html"target="_blank">try this »</a>,
candlestick <ahref="example/k.html"target="_blank">try this »</a>,
scatter <ahref="example/scatter.html"target="_blank">try this »</a>,
pie <ahref="example/pie.html"target="_blank">try this »</a>,
chord <ahref="example/chord.html"target="_blank">try this »</a>,
force <ahref="example/force1.html"target="_blank">try this »</a>,
map <ahref="example/map.html"target="_blank">try this »</a>,
gauge <ahref="example/gauge.html"target="_blank">try this »</a>,
funnel <ahref="example/funnel.html"target="_blank">try this »</a>
line <ahref="example/line.html#-en"target="_blank">try this »</a>,
column <ahref="example/bar.html#-en"target="_blank">try this »</a>,
candlestick <ahref="example/k.html#-en"target="_blank">try this »</a>,
scatter <ahref="example/scatter.html#-en"target="_blank">try this »</a>,
pie <ahref="example/pie.html#-en"target="_blank">try this »</a>,
chord <ahref="example/chord.html#-en"target="_blank">try this »</a>,
force <ahref="example/force1.html#-en"target="_blank">try this »</a>,
map <ahref="example/map.html#-en"target="_blank">try this »</a>,
gauge <ahref="example/gauge.html#-en"target="_blank">try this »</a>,
funnel <ahref="example/funnel.html#-en"target="_blank">try this »</a>
</p>
<h4>lineStyle<aname="LineStyle"></a></h4>
...
...
@@ -3960,7 +3960,7 @@ geoCoord : {
</table>
<h4>loadingOption<aname="Loadingoption"></a></h4>
<P> The loading options control the appearance of the loading screen that covers the plot area on chart operations. <ahref="example/loading.html"target="_blank">Try this »</a></P>
<P> The loading options control the appearance of the loading screen that covers the plot area on chart operations. <ahref="example/loading.html#-en"target="_blank">Try this »</a></P>
<p>Supports extended map on <ahref='http://www.oschina.net/translate/geojson-spec?cmp'target="_blank">GeoJson</a> format. Try <ahref="./example/map6.html"target="_blank">HK 》</a><ahref="./example/map7.html"target="_blank">USA 》</a></p>
<p>Supports extended map on <ahref='http://www.oschina.net/translate/geojson-spec?cmp'target="_blank">GeoJson</a> format. Try <ahref="./example/map6.html#-en"target="_blank">HK 》</a><ahref="./example/map7.html#-en"target="_blank">USA 》</a></p>
<divclass="code">
<pre>
// step1: find the geoJson data file in the target region, like HK_geo.json.
...
...
@@ -4479,7 +4479,7 @@ option.series = [
</table>
<h3>Appendix: an Intuitive Example<aname="Appendix-an-Intuitive-Example"></a></h3>
<p>For more examples, click <ahref="example-en.html"target="_blank">example</a>. Use this <ahref="example/demo.html"target="_blank">demo</a> or <ahref="example/www/index.html"target="_blank">ECharts single file import</a> as your template. </p>
<p>For more examples, click <ahref="example-en.html"target="_blank">example</a>. Use this <ahref="example/demo.html#-en"target="_blank">demo</a> or <ahref="example/www/index.html"target="_blank">ECharts single file import</a> as your template. </p>
<divclass="code"style="margin-bottom: 25px;">
<prestyle="margin-bottom: 0;">// instantiate the chart------------------