Google Git
Sign in
apache / echarts / refs/tags/1.3.5 / . / doc / example.html
blob: 82f24c444e4dcd2165a43b13f77b28b35718b453 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="linzhifeng@baidu.com">
<script src="asset/js/esl/esl.js"></script>
<!-- Le styles -->
<link href="asset/css/bootstrap.css" rel="stylesheet">
<link href="asset/css/bootstrap-responsive.css" rel="stylesheet">
<link href="asset/css/echartsHome.css" rel="stylesheet">
<link href="asset/css/flexslider.css" rel="stylesheet"/>
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="asset/ico/favicon.png">
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="../index.html">ECharts</a>
<div class="nav-collapse collapse">
<a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
<ul class="nav">
<li><a href="../index.html"><i class="icon-home icon-white"></i> Home</a></li>
<li class="active"><a href="example.html" class="active">Example</a></li>
<li><a href="doc.html" >API &amp; Doc</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="last-release-link" href=""> </a></li>
<li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
<li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
<li class="divider"></li>
<!--li class="nav-header">Library</li-->
<li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar-wrapper -->
<div class="container">
<div class="row-fluid">
<div class="span6">
<h1>折线图</h1>
<section class="slider">
<div class="flexslider thumb3">
<ul class="slides">
<li data-thumb="asset/img/example/line1.png">
<a href="example/line1.html"><img src="asset/img/example/line1.png" ></a>
<p>标准折线图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/line2.html"><img src="asset/img/example/cache.png"></a>
<p>堆积折线图，支持任意系列堆积</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/line5.html"><img src="asset/img/example/cache.png"></a>
<p>标准折线图，横纵坐标轴互换</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/line3.html"><img src="asset/img/example/cache.png"></a>
<p>标准面积图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/line4.html"><img src="asset/img/example/cache.png"></a>
<p>堆积面积图，支持任意系列堆积</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/line.html"><img src="asset/img/example/cache.png"></a>
<p>折线图：【个性化】填充、线条、拐点样式等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
<div class="span6">
<h1>柱状图</h1>
<section class="slider">
<div class="flexslider thumb4">
<ul class="slides">
<li data-thumb="asset/img/example/bar1.png">
<a href="example/bar1.html"><img src="asset/img/example/bar1.png"></a>
<p>标准柱状图。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar2.html"><img src="asset/img/example/cache.png"></a>
<p>堆积柱状图，支持任意系列堆积。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar3.html"><img src="asset/img/example/cache.png"></a>
<p>标准条状图。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar4.html"><img src="asset/img/example/cache.png"></a>
<p>堆积条状图，支持任意系列堆积。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar5.html"><img src="asset/img/example/cache.png"></a>
<p>标准条状图，正负值混合。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar6.html"><img src="asset/img/example/cache.png"></a>
<p>阶梯瀑布图。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar7.html"><img src="asset/img/example/cache.png"></a>
<p>瀑布图。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar8.html"><img src="asset/img/example/cache.png"></a>
<p>交错正负轴标签。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar9.html"><img src="asset/img/example/cache.png"></a>
<p>多维条形图。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar10.html"><img src="asset/img/example/cache.png"></a>
<p>温度计式图表。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/bar.html"><img src="asset/img/example/cache.png"></a>
<p>柱状图：【个性化】柱形宽度，填充、高亮样式等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
<hr>
</div>
<div class="row-fluid">
<div class="span6">
<h1>散点图</h1>
<section class="slider">
<div class="flexslider thumb4">
<ul class="slides">
<li data-thumb="asset/img/example/scatter1.png">
<a href="example/scatter1.html"><img src="asset/img/example/scatter1.png"></a>
<p>标准散点图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/scatter2.html"><img src="asset/img/example/cache.png"></a>
<p>气泡图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/scatter3.html"><img src="asset/img/example/cache.png"></a>
<p>大规模散点图（IE8-不支持）</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/scatter.html"><img src="asset/img/example/cache.png"></a>
<p>散点图：【个性化】图形样式，大小等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
<div class="span6">
<h1>K线图</h1>
<section class="slider">
<div class="flexslider thumb4">
<ul class="slides">
<li data-thumb="asset/img/example/k1.png">
<a href="example/k1.html"><img src="asset/img/example/k1.png"></a>
<p>标准K线图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/k.html"><img src="asset/img/example/cache.png"></a>
<p>K线图：【个性化】柱形阴阳图形样式等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<h1>饼图</h1>
<section class="slider">
<div class="flexslider thumb4">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/pie1.html"><img src="asset/img/example/cache.png"></a>
<p>标准饼图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/pie2.html"><img src="asset/img/example/cache.png"></a>
<p>标准环形图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/pie3.html"><img src="asset/img/example/cache.png"></a>
<p>嵌套饼图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/pie4.html"><img src="asset/img/example/cache.png"></a>
<p>南丁格尔玫瑰图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/pie5.html"><img src="asset/img/example/cache.png"></a>
<p>信息图样式</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/pie6.html"><img src="asset/img/example/cache.png"></a>
<p>信息图样式2</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/pie.html"><img src="asset/img/example/cache.png"></a>
<p>饼图：【个性化】填充、标签文本、视觉引导线样式等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
<div class="span6">
<h1>雷达图</h1>
<section class="slider">
<div class="flexslider thumb4">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/radar1.html"><img src="asset/img/example/cache.png"></a>
<p>标准雷达图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/radar2.html"><img src="asset/img/example/cache.png"></a>
<p>标准填充雷达图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/radar3.html"><img src="asset/img/example/cache.png"></a>
<p>多雷达图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/radar.html"><img src="asset/img/example/cache.png"></a>
<p>雷达图：【个性化】线条，拐点，填充样式</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<h1>和弦图</h1>
<section class="slider">
<div class="flexslider thumb3">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/chord1.html"><img src="asset/img/example/cache.png"></a>
<p>标准和弦图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/chord2.html"><img src="asset/img/example/cache.png"></a>
<p>多维图例选择</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/chord.html"><img src="asset/img/example/cache.png"></a>
<p>和弦图：【个性化】填充、标签文本、线条样式等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
<div class="span6">
<h1>力导向布局图</h1>
<section class="slider">
<div class="flexslider thumb3">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/force1.html"><img src="asset/img/example/cache.png"></a>
<p>简单关系网络。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/webkit-dep.html"><img src="asset/img/example/cache.png"></a>
<p>Webkit内核依赖。</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<h1>地图</h1>
<section class="slider">
<div class="flexslider thumb4">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/map1.html"><img src="asset/img/example/cache.png"></a>
<p>标准地图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map2.html"><img src="asset/img/example/cache.png"></a>
<p>地域选择器</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map4.html"><img src="asset/img/example/cache.png"></a>
<p>标准世界地图</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map5.html"><img src="asset/img/example/cache.png"></a>
<p>世界地图选择器</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map3.html"><img src="asset/img/example/cache.png"></a>
<p>全国34个省市自治区</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map6.html"><img src="asset/img/example/cache.png"></a>
<p>自定义扩展-香港</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map7.html"><img src="asset/img/example/cache.png"></a>
<p>自定义扩展-美国</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map8.html"><img src="asset/img/example/cache.png"></a>
<p>mapType支持子区域模式</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/mix3.html"><img src="asset/img/example/cache.png"></a>
<p>地图与饼图混搭，地图同时作为地域选择器</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/mix5.html"><img src="asset/img/example/cache.png"></a>
<p>数据驱动，省市级下钻</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/map.html"><img src="asset/img/example/cache.png"></a>
<p>地图：【个性化】填充、标签文本、线条样式等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
<div class="span6">
<h1>混搭</h1>
<section class="slider">
<div class="flexslider thumb3">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/mix1.html"><img src="asset/img/example/cache.png"></a>
<p>折线图与柱状图混搭，双数值轴</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/mix2.html"><img src="asset/img/example/cache.png"></a>
<p>柱状图与饼图混搭</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/mix4.html"><img src="asset/img/example/cache.png"></a>
<p>折线图与散点图混合（使用时需要注意同步数值轴与类目轴坐标）</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/lasagna.html"><img src="asset/img/example/cache.png"></a>
<p>多层嵌套环形图，千层饼</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/wormhole.html"><img src="asset/img/example/cache.png"></a>
<p>多层嵌套雷达图，虫洞</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<h1>组件</h1>
<section class="slider">
<div class="flexslider thumb3" id="component">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/axis.html"><img src="asset/img/example/cache.png"></a>
<p>坐标系：【个性化】标签文字、间隔线、间隔区域样式等~</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/dataZoom1.html"><img src="asset/img/example/cache.png"></a>
<p>数据区域缩放</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/dataZoom.html"><img src="asset/img/example/cache.png"></a>
<p>数据区域缩放：【个性化】数据阴影、背景、拖拽手柄样式等~</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/dataRange1.html"><img src="asset/img/example/cache.png"></a>
<p>值域漫游</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/dataRange.html"><img src="asset/img/example/cache.png"></a>
<p>值域控件：【个性化】布局，填充样式样式等~</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/tooltip.html"><img src="asset/img/example/cache.png"></a>
<p>提示框：【个性化】文字样式、边框、背景、格式器等~</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
<div class="span6">
<h1>其他</h1>
<section class="slider">
<div class="flexslider thumb3">
<ul class="slides">
<li data-thumb="asset/img/example/cache.png">
<a href="example/dynamicLineBar.html"><img src="asset/img/example/cache.png"></a>
<p>动态数据（折线图、柱状图）</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/dynamicScatterK.html"><img src="asset/img/example/cache.png"></a>
<p>动态数据（散点图、K线图）</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/dynamicPieRadar.html"><img src="asset/img/example/cache.png"></a>
<p>动态数据（饼图、雷达图）</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/loading.html"><img src="asset/img/example/cache.png"></a>
<p>加载中（Loading）</p>
</li><!--/li-->
<li data-thumb="asset/img/example/cache.png">
<a href="example/event.html"><img src="asset/img/example/cache.png"></a>
<p>事件交互，可以捕获的用户交互和数据变化事件实现图表与外界的联动。</p>
</li><!--/li-->
<li data-thumb="asset/img/example/import.png">
<a href="example/www/index.html"><img src="asset/img/example/import.png"></a>
<p>单文件引入ECharts</p>
</li><!--/li-->
</ul>
</div>
</section>
</div>
</div>
<hr>
<h3>专题<a name="topic"></a></h3>
<ul>
<li><a href="example/topic/10-me-china/index.html" target="_blank">中国经济十年时空漫游（2002-2011）</a> by 于博（新华社） · 吴楚茵（南方都市报） · 林峰（百度）</li>
<li><a href="example/topic/24-population-china/index.html" target="_blank">中国人口流动大潮（1987-2011）</a> by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · 林峰（百度）</li>
</ul>
<hr>
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="changelog.html" target="_blank">Changelog</a></p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="asset/js/jquery.js"></script>
<script src="asset/js/bootstrap-transition.js"></script>
<script src="asset/js/bootstrap-alert.js"></script>
<script src="asset/js/bootstrap-modal.js"></script>
<script src="asset/js/bootstrap-dropdown.js"></script>
<script src="asset/js/bootstrap-scrollspy.js"></script>
<script src="asset/js/bootstrap-tab.js"></script>
<script src="asset/js/bootstrap-tooltip.js"></script>
<script src="asset/js/bootstrap-popover.js"></script>
<script src="asset/js/bootstrap-button.js"></script>
<script src="asset/js/bootstrap-collapse.js"></script>
<script src="asset/js/bootstrap-carousel.js"></script>
<script src="asset/js/bootstrap-typeahead.js"></script>
<!-- FlexSlider -->
<script defer src="asset/js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 3000,
controlNav: "thumbnails"
});
var section = $('.flexslider');
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) {
list[0].firstChild.alt = 'ECharts';
for (var j = 1, k = list.length - 1; 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;
nav[j - 1].alt = 'ECharts ' + href;
nav[j - 1].src = src;
}
list[list.length - 1].firstChild.alt = 'ECharts';
}
}, i * 500);
}
for (var i = 0, l = section.length; i < l; i++) {
loadImage(i);
}
});
</script>
</body>
</html>