<!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="description" content="ECharts">
|
<meta name="author" content="kener.linfeng@gmail.com">
|
<title>ECharts · Example</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]-->
|
<style type="text/css">
|
.affix {
|
width:160px;
|
}
|
.affix li {
|
list-style-type : none;
|
height : 35px;
|
line-height:35px;
|
vertical-align:middle;
|
}
|
ul.slides li{
|
width : 33.3%;
|
overflow:hidden;
|
float : left;
|
border:0px solid #ccc;
|
margin: 15px 0;
|
list-style-type : none;
|
position:relative;
|
}
|
ul.slides li a {
|
padding:5px;
|
display:block;
|
}
|
ul.slides li a strong{
|
font-size:15px;
|
color : #1e90ff;
|
}
|
ul.slides li a:hover {
|
background-color:#eee;
|
text-decoration:none;
|
}
|
ul.slides li img {
|
width:60%;
|
}
|
ul.slides li span {
|
color:#666;
|
width:36%;
|
vertical-align:top;
|
display:inline-block;
|
*zoom:1;
|
}
|
.col-md-10 h3 {
|
clear:both;
|
margin:10px 0;
|
padding-bottom:10px;
|
border-bottom:1px solid #ccc;
|
}
|
.col-md-10 h3 a {
|
display:inline-block;
|
*zoom:1;
|
padding-top:63px;
|
}
|
#chartsTypeNav ul li {
|
transition: background-color 0.3s;
|
-moz-transition: background-color 0.3s;
|
-webkit-transition: background-color 0.3s;
|
-o-transition: background-color 0.3s;
|
padding-left:10px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<!-- Fixed navbar -->
|
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
|
|
<div class="container" style="padding-top:10px;">
|
<div class="row-fluid">
|
<div class="col-md-2">
|
<div class = 'affix' style="margin-left:-20px;" id="chartsTypeNav">
|
<ul style="padding:5px 0;">
|
<li><i class="ec-icon ec-icon-line"></i> <a href="#line"><abbr title="Line & Area">Line</abbr></a></li>
|
<li><i class="ec-icon ec-icon-bar"></i> <a href="#bar"><abbr title="Column & Bar">Bar</abbr></a></li>
|
<li><i class="ec-icon ec-icon-scatter"></i> <a href="#scatter"><abbr title="Scatter & Bubble">Scatter</abbr></a></li>
|
<li><i class="ec-icon ec-icon-k"></i> <a href="#k">Candlestick</a></li>
|
<li><i class="ec-icon ec-icon-pie"></i> <a href="#pie"><abbr title="Pie & Doughnut">Pie</abbr></a></li>
|
<li><i class="ec-icon ec-icon-radar"></i> <a href="#radar">Radar</a></li>
|
<li><i class="ec-icon ec-icon-chord"></i> <a href="#chord">Chord</a></li>
|
<li><i class="ec-icon ec-icon-force"></i> <a href="#force"><abbr title="Force-Directed Charts">FD Charts</abbr></a></li>
|
<li><i class="ec-icon ec-icon-map"></i> <a href="#map">Maps</a></li>
|
<li><i class="ec-icon ec-icon-gauge"></i> <a href="#gauge">Gauges</a></li>
|
<li><i class="ec-icon ec-icon-funnel"></i> <a href="#funnel">Funnels</a></li>
|
<li><i class="ec-icon ec-icon-eventRiver"></i> <a href="#eventRiver">EventRiver</a></li>
|
<li><i class="ec-icon ec-icon-heatmap"></i> <a href="#heatmap">Heatmap</a></li>
|
<li><i class="ec-icon ec-icon-venn"></i> <a href="#venn">Venn</a></li>
|
<li><i class="ec-icon ec-icon-treemap"></i> <a href="#treemap">Treemap</a></li>
|
<li><i class="ec-icon ec-icon-tree"></i> <a href="#tree">Tree</a></li>
|
<li><i class="ec-icon ec-icon-wordCloud"></i> <a href="#wordCloud">WordCloud</a></li>
|
<li><i class="ec-icon ec-icon-mix"></i> <a href="#mix">Combinations</a></li>
|
<li><i class="ec-icon ec-icon-component"></i> <a href="#component">Components</a></li>
|
<li><i class="ec-icon ec-icon-other"></i> <a href="#other">Others</a></li>
|
<li><i class="ec-icon ec-icon-theme"></i> <a href="#theme">Themes</a></li>
|
<li><i class="ec-icon ec-icon-topic"></i> <a href="#topic">Features</a></li>
|
</ul>
|
</div>
|
</div>
|
<div class="col-md-10">
|
<p style="margin:10px 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>
|
<h3>Line<a name="line"> </a></h3>
|
<div class="section">
|
<div class="thumb3">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/line1.png">
|
<a href="example/line1.html"><img src="asset/img/example/line1.png" >
|
<span><strong>Basic Line</strong><br/>label, custom line shadow</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Stacked Line</strong><br/>multiple sreies stack</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line5.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Line</strong><br/>inverted axes, smoothed line</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Area</strong><br/>vertical fill, smoothed line</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Stacked Area</strong><br/>multiple sreies stack</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line7.html"><img src="asset/img/example/cache.png">
|
<span><strong>Irregular Line</strong><br/>two value axis</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line8.html"><img src="asset/img/example/cache.png">
|
<span><strong>Irregular Line</strong><br/>time axis</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line6.html"><img src="asset/img/example/cache.png">
|
<span><strong>Area</strong><br/>reversed value axis</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line.html"><img src="asset/img/example/cache.png">
|
<span><strong>Line</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/line9.html"><img src="asset/img/example/cache.png">
|
<span><strong>Logarithmic Axis</strong></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Bar (Column)<a name="bar"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/bar1.png">
|
<a href="example/bar1.html"><img src="asset/img/example/bar1.png">
|
<span><strong>Basic Column</strong><br/>label, annotation</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Stacked Column</strong><br/>multiple sreies stack</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar10.html"><img src="asset/img/example/cache.png">
|
<span><strong>Thermometer</strong><br/>custom style, tooltip display</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar7.html"><img src="asset/img/example/cache.png">
|
<span><strong>Compositive Waterfall</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar6.html"><img src="asset/img/example/cache.png">
|
<span><strong>Change Waterfall</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar12.html"><img src="asset/img/example/cache.png">
|
<span><strong>Stacked and Clustered Column</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Bar</strong><br/>inverted axes</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Stacked Bar</strong><br/>click on a legend key to show or hide a series</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar9.html"><img src="asset/img/example/cache.png">
|
<span><strong>Stacked Floating Bar</strong><br/>transparent data-driven style</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar5.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tornado</strong><br/>bar chart with negative stack</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar8.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tornado</strong><br/>staggered axes labels</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar13.html"><img src="asset/img/example/cache.png">
|
<span><strong>Irregular Bar</strong><br/>two value axis</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar11.html"><img src="asset/img/example/cache.png">
|
<span><strong>Timeline</strong><br/>display how data changes over time</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar14.html"><img src="asset/img/example/cache.png">
|
<span><strong>Rainbow bar</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar15.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple sreies rainbow bar</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/bar.html"><img src="asset/img/example/cache.png">
|
<span><strong>Column</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Scatter<a name="scatter"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/scatter1.png">
|
<a href="example/scatter1.html"><img src="asset/img/example/scatter1.png">
|
<span><strong>Basic Scatter</strong><br/>label, annotation</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/scatter2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Bubble</strong><br/>bubble size calculation</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/scatter3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Large-Scale Scatter</strong><br/>enable the setting</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/scatter5.html"><img src="asset/img/example/cache.png">
|
<span><strong>Category Scatter</strong><br/>scrollable data area</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/scatter6.html"><img src="asset/img/example/cache.png">
|
<span><strong>Time data</strong><br/>time axis</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/scatter4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Timeline</strong><br/>like Gapminder</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dataRange1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Scale Roaming</strong><br/>basic function</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/scatter.html"><img src="asset/img/example/cache.png">
|
<span><strong>Scatter</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Candlestick<a name="k"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/k1.png">
|
<a href="example/k1.html"><img src="asset/img/example/k1.png">
|
<span><strong>Candlestick</strong><br/>label, zoomable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/k.html"><img src="asset/img/example/cache.png">
|
<span><strong>Candlestick</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Pie<a name="pie"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Pie</strong><br/>set center, radius</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Doughnut</strong><br/>set center and radius, tooltip display</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Nested Pie</strong><br/>set multiple pies' centers and radii</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Nightingale's Rose Diagram</strong><br/> radius & area</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie5.html"><img src="asset/img/example/cache.png">
|
<span><strong>Doughnut</strong><br/>infographic style, tooltip technique</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie6.html"><img src="asset/img/example/cache.png">
|
<span><strong>Doughnut</strong><br/>infographic style, extra content addition</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie7.html"><img src="asset/img/example/cache.png">
|
<span><strong>Timeline</strong><br/>display how data changes over time</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/lasagna.html"><img src="asset/img/example/cache.png">
|
<span><strong>Lasagna</strong><br/>multi-level doughnut chart</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/pie.html"><img src="asset/img/example/cache.png">
|
<span><strong>Pie</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Radar<a name="radar"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/radar1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Radar</strong><br/>set polar coordinate system </span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/radar2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Filled Radar</strong><br/>fill style</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/radar3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Radars</strong><br/>multiple polar coordinate systems</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/wormhole.html"><img src="asset/img/example/cache.png">
|
<span><strong>Wormhole</strong><br/>multi-level radar chart</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/radar.html"><img src="asset/img/example/cache.png">
|
<span><strong>Radar</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Chord<a name="chord"> </a></h3>
|
<div class="section">
|
<div class="thumb3">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/chord1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Chord</strong><br/>data format, sorting</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/chord2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Dimensions</strong><br/>legend selected</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/chord3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Chord</strong><br/>data format, sorting</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/chord4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Non-ribbon Chord</strong><br/>data format, sorting</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/webkit-dep2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Complex Topology</strong><br/>Webkit dependency</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/chord.html"><img src="asset/img/example/cache.png">
|
<span><strong>Chord</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Force-Directed Charts<a name="force"> </a></h3>
|
<div class="section">
|
<div class="thumb3">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/force1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Simple Topology</strong><br/>data format</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/force2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tree Topology</strong><br/>data format</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/force4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tree Topology</strong><br/>data format</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/webkit-dep.html"><img src="asset/img/example/cache.png">
|
<span><strong>Complex Topology</strong><br/>Webkit dependency</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/force.html"><img src="asset/img/example/cache.png">
|
<span><strong>Force-Directed Layout</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Maps<a name="map"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Map</strong><br/>China map, multi-series, Scale Roaming</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Map</strong><br/>China map, region selector</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Map</strong><br/>event response, switch</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Map</strong><br/>world map, Scale Roaming</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map5.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Map</strong><br/>world map, region selector</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix5.html"><img src="asset/img/example/cache.png">
|
<span><strong>MultiMap</strong><br/>data-driven, zoom in</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map20.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map Extension</strong><br/>GeoJSON - Chinese city</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map6.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map Extension</strong><br/>GeoJSON - Hong Kong</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map7.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map Extension</strong><br/>GeoJSON - USA</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map13.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map Extension</strong><br/>GeoJSON - Continents</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/bmap1.png">
|
<a href="../extension/BMap/doc/BMap.html"><img src="asset/img/example/bmap1.png" >
|
<span><strong>ECharts Extension</strong><br/>map.baidu.com BMap</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/bmap2.png">
|
<a href="../extension/BMap/doc/example.html"><img src="asset/img/example/bmap2.png" >
|
<span><strong>ECharts Extension</strong><br/>map.baidu.com BMap</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map10.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map MarkLine</strong><br/>markLine<br/>multi-series</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map9.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map MarkPoint</strong><br/>Scale Roaming</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map8.html"><img src="asset/img/example/cache.png">
|
<span><strong>Sub-Region Mode</strong><br/>sub-region mode</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map11.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map MarkLine</strong><br/>glow effects, Baidu migration</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map12.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map MarkLine</strong><br/>glow effect, Chinese trunk railways</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map15.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map MarkLine</strong><br/>large-scale glow effects, Popularity</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map16.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map Extension</strong><br/>SVG - body composition</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map17.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map Extension</strong><br/>SVG - football pitch</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map18.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map Extension</strong><br/>SVG - interior space data analysis</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map14.html"><img src="asset/img/example/cache.png">
|
<span><strong>Timeline</strong><br/>display how data changes over time</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map19.html"><img src="asset/img/example/cache.png">
|
<span><strong>Extension + Timeline</strong><br/>simulation of 2014 World Cup goals</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/map.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dataRange2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Data Range</strong><br/>Customized split list</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Gauges<a name="gauge"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/gauge1.png">
|
<a href="example/gauge1.html"><img src="asset/img/example/gauge1.png">
|
<span><strong>Basic Angular Gauge</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/gauge2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Angular Gauge</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/gauge3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Angular Gauge</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/gauge4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Angular Gauges</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/gauge5.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Angular Gauges</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/gauge.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Angular Gauge</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Funnel<a name="funnel"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/funnel1.png">
|
<a href="example/funnel1.html"><img src="asset/img/example/funnel1.png">
|
<span><strong>Basic Funnel</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/funnel2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Funnels</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/funnel3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Funnels</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/funnel4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Funnels</strong><br/>customizable align</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/funnel.html"><img src="asset/img/example/cache.png">
|
<span><strong>Basic Funnel</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Heatmap<a name="heatmap"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/heatmap.html"><img src="asset/img/example/cache.png">
|
<span><strong>Heatmap</strong><br/>Customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/heatmap2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Heatmap</strong></span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/heatmap_map.html"><img src="asset/img/example/cache.png">
|
<span><strong>Heatmap</strong><br/>Used with map</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>EventRiver<a name="eventRiver"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/eventRiver1.png">
|
<a href="example/eventRiver1.html"><img src="asset/img/example/eventRiver1.png">
|
<span><strong>EventRiver</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/eventRiver2.html"><img src="asset/img/example/cache.png">
|
<span><strong>EventRiver</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Venn<a name="venn"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/venn.html"><img src="asset/img/example/cache.png">
|
<span><strong>Venn</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Treemap<a name="treemap"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/treemap.html"><img src="asset/img/example/cache.png">
|
<span><strong>Treemap</strong><br/>Basic example</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/treemap1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Treemap</strong><br/>Drill down</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/treemap2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Treemap</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Tree<a name="tree"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/tree.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tree</strong><br/>Basic example</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/tree2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tree</strong><br/>China province</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/tree1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tree</strong><br/>Customizable</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Word Cloud<a name="wordCloud"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/wordCloud.html"><img src="asset/img/example/cache.png">
|
<span><strong>Word Cloud</strong></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Combinations<a name="mix"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Column + Line</strong><br/>double value axes</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix6.html"><img src="asset/img/example/cache.png">
|
<span><strong>Column + Line</strong><br/>range simulation</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix2.html"><img src="asset/img/example/cache.png">
|
<span><strong>Column + Pie</strong><br/>custom pie center</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix4.html"><img src="asset/img/example/cache.png">
|
<span><strong>Scatter + Line</strong><br/>synchronized of value and category axis</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix7.html"><img src="asset/img/example/cache.png">
|
<span><strong>Scatter + Pie</strong><br/>pie in bubble’s place, multi-series</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix10.html"><img src="asset/img/example/cache.png">
|
<span><strong>Candlestick + Line</strong><br/>double value axes, multi-series</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix12.html"><img src="asset/img/example/cache.png">
|
<span><strong>Line + Pie</strong><br/>tendency and percentage, more efficient</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix3.html"><img src="asset/img/example/cache.png">
|
<span><strong>Map + Pie</strong><br/>map as region selector</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix9.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Combinations</strong><br/>easy connect, legend, tool sharing, multi-series</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix8.html"><img src="asset/img/example/cache.png">
|
<span><strong>Multiple Combinations</strong><br/>Cartesian coordinate system, multi-series</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/mix11.html"><img src="asset/img/example/cache.png">
|
<span><strong>Business Intelligence(BI) Charts</strong><br/>gauge, nested funnel</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Components<a name="component"> </a></h3>
|
<div class="section">
|
<div class="thumb3">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/axis.html"><img src="asset/img/example/cache.png">
|
<span><strong>Coordinate System</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/doc/legend.png">
|
<a href="example/legend.html"><img src="asset/img/doc/legend.png">
|
<span><strong>Legend</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dataZoom1.html"><img src="asset/img/example/cache.png">
|
<span><strong>Data Area Zoom</strong><br/>basic function</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dataZoom.html"><img src="asset/img/example/cache.png">
|
<span><strong>Data Area Control</strong><br/>customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/tooltip.html"><img src="asset/img/example/cache.png">
|
<span><strong>Tooltip</strong><br/>multilevel control, customizable</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dataRange.html"><img src="asset/img/example/cache.png">
|
<span><strong>Scale Control</strong><br/>custom layout, background, drag handle, etc</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Others<a name="other"> </a></h3>
|
<div class="section">
|
<div class="thumb4">
|
<ul class="slides">
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dynamicLineBar.html"><img src="asset/img/example/cache.png">
|
<span><strong>Dynamic Data</strong><br/>line, column</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dynamicScatterK.html"><img src="asset/img/example/cache.png">
|
<span><strong>Dynamic Data</strong><br/>scatter, candlestick</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/dynamicPieRadar.html"><img src="asset/img/example/cache.png">
|
<span><strong>Dynamic Data</strong><br/>pie, radar</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/loading.html"><img src="asset/img/example/cache.png">
|
<span><strong>Animated Transition </strong><br/>Loading</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/import.png">
|
<a href="example/www/index.html"><img src="asset/img/example/import.png">
|
<span><strong>Single File Import</strong><br/>modular single file echarts.js</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/import.png">
|
<a href="example/www2/index.html"><img src="asset/img/example/import.png">
|
<span><strong>Single File Import</strong><br/>plain single file echarts-all.js</span></a>
|
</li><!--/li-->
|
<li data-thumb="asset/img/example/cache.png">
|
<a href="example/event.html"><img src="asset/img/example/cache.png">
|
<span><strong>Event Interaction</strong><br/>link chart with the outside</span></a>
|
</li><!--/li-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<h3>Themes<a name="theme"> </a></h3>
|
<p>Theme Preview <a href='example/theme.html#-en' target="_blank">ECharts Theme</a>, Custom Theme Debugger <a href='example/themeDesigner.html#-en' target="_blank">ECharts Theme Designer</a></p>
|
<p><small>PS: Please do not rely too much on the code editing area, for we don't have local cache and the page will be gone once you refresh it. Instead, we would strongly recommend that you use a local editor to customize your theme, and the code editing area to debug it. When you finish writing your theme, just click on the "SaveAsImage" button at the top of the page (not supported by IE8-), and all the charts will be saved in a picture, which is the default style. Come on, show us your design, and make it our built-in or even default theme! As a reward, we will offer you a small gift and add your name to the contributor list.</small></p>
|
<a href="example/theme.html#-en" target="_blank"><img src="asset/img/example/theme.png" style="max-width:100%"></a>
|
<div>
|
</div>
|
<h3>Features<a name="topic"></a></h3>
|
<p><small>The following pages do not support old versions of IE; please use IE9+, chrome, safari, firefox, opear or other modern browsers.</small></p>
|
<ul>
|
<li><a href="example/topic/aqi-china/index.html" target="_blank">Air Quality of Major Chinese Cities </a> by <a href="http://weibo.com/wfsr" target="_blank">Da Fo</a>(Baidu), <a href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng</a>(Baidu)</li>
|
<li><a href="example/topic/10-me-china/index.html" target="_blank">Charting China's Economy (2002-2011)</a> by Yu Bo (Xinhua News Agency), Wu Chuyin(Nanfang Metropolis Daily), <a href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng</a>(Baidu)</li>
|
<li><a href="example/topic/24-population-china/index.html" target="_blank">China's population flow (1987 - 2011)</a> by Meng Lixin(Tencent), Wang Feiyu(Securities Times), Yan Dong (Shijue.me), <a href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng</a>(Baidu)</li>
|
<li><a href="http://hijiangtao.github.io/variety-show-hot-spot-vis/" target="_blank">TV show visual evaluation system</a> by <a href="http://hijiangtao.github.io/variety-show-hot-spot-vis/about/" target="_blank">Data.BIT</a> (Beijing Institute of Technology)</li>
|
<li><a href="http://echarts.baidu.com/doc/example/topic/sino-japanese-war-1895/index.html" target="_blank">120th anniversary of the sino-japanese war</a> by <a href="http://weibo.com/u/3798120772" target="_blank">Fu Jianhai</a> (CSDN open source camp)</li>
|
<li><a href="http://www.thinkgis.cn/public/sina/" target="_blank">2014 Sina Weibo POI Data Visualization</a> by <a href="http://www.weibo.com/u/1707284737" target="_blank">ThinkingGIS </a></li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div> <!-- /container -->
|
|
<footer id="footer"></footer>
|
<!-- Le javascript
|
================================================== -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
<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 type="text/javascript">
|
$(function (){
|
var section = $('[class=section]');
|
function loadImage(i) {
|
setTimeout(function (){
|
var list = $('div>ul>li>a', section[i]);
|
var nav = $('ol>li>img', section[i]);
|
var href;
|
var src;
|
if (list.length > 0) {
|
for (var j = 0, k = list.length; j < k; j++) {
|
list[j].target = '_blank';
|
href = list[j].href.slice(list[j].href.lastIndexOf('/') + 1, -5);
|
src = list[j].firstChild.src.replace(
|
'cache', href
|
);
|
list[j].firstChild.alt = 'ECharts ' + href;
|
list[j].firstChild.src = src;
|
list[j].href += '#-en';
|
}
|
}
|
}, i * 100);
|
}
|
for (var i = 0, l = section.length; i < l; i++) {
|
loadImage(i);
|
}
|
|
var chartsTypeNav = document.getElementById('chartsTypeNav');
|
function _scroll() {
|
var navHeight = chartsTypeNav.offsetHeight;
|
var viewHeight = document.documentElement.clientHeight;
|
var scrollHeight = document.documentElement.scrollTop
|
|| document.body.scrollTop;
|
var offsetHeight = document.body.offsetHeight;
|
var footHole = offsetHeight - scrollHeight - viewHeight;
|
var maxHeight = viewHeight - (230 - footHole) - 80;
|
if (footHole < 320 && maxHeight < navHeight) {
|
// 见footer
|
//chartsTypeNav.style.marginTop = footHole - 150 + 'px';
|
chartsTypeNav.style.marginTop = maxHeight - navHeight + 'px';
|
}
|
else {
|
// 未见footer
|
chartsTypeNav.style.marginTop = 'auto';
|
}
|
|
var len = offsetList.length;
|
if (scrollHeight > offsetList[len - 3].offsetTop) {
|
navDom[len - 2].style.backgroundColor = '#3E98C5';
|
$(navDom[len - 2]).children('a')[0].style.color = '#fff';
|
}
|
else {
|
for (var i = 0; i < len - 1; i++) {
|
if (Math.abs(scrollHeight - offsetList[i].offsetTop) < 280 && navDom[i]) {
|
navDom[i].style.backgroundColor = '#3E98C5';
|
$(navDom[i]).children('a')[0].style.color = '#fff';
|
}
|
else {
|
navDom[i].style.backgroundColor = 'transparent';
|
$(navDom[i]).children('a')[0].style.color = '#3E98C5';
|
}
|
}
|
}
|
}
|
var offsetList = [];
|
var navDom = $('#chartsTypeNav>ul>li');
|
function _resize() {
|
offsetList = [];
|
$('h3').each(function(idx, dom){
|
offsetList[idx] = {
|
name : dom.childNodes[1].name,
|
offsetTop : dom.childNodes[1].offsetTop
|
};
|
});
|
offsetList.push({
|
name : 'topic',
|
offsetTop : 100000
|
})
|
setTimeout(_scroll, 500);
|
}
|
|
function scroll2Pos (idx) {
|
return function() {
|
$("body,html").animate(
|
{scrollTop: offsetList[idx].offsetTop + 30},
|
500
|
);
|
return false;
|
}
|
}
|
$('#chartsTypeNav>ul>li>a').each(function(idx, dom){
|
$(dom).on('click', scroll2Pos(idx));
|
})
|
$(window).on('scroll', _scroll);
|
$(window).on('resize', _resize);
|
_resize();
|
});
|
</script>
|
</body>
|
</html>
|
