| <!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"> |
| |
| <!-- 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 & 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 href="https://github.com/ecomfe/echarts/archive/1.0.0.zip">ZIP (1.0.0)</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> |
| <li><a href="http://tangram.baidu.com/" target="_blank">Tangram</a></li> |
| </ul> |
| </li> |
| </ul> |
| </div><!--/.nav-collapse --> |
| </div><!-- /.container --> |
| </div><!-- /.navbar-inner --> |
| </div><!-- /.navbar-wrapper --> |
| |
| <div class="container"> |
| <h1>折线图</h1> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/line1.html"><img src="asset/img/example/line1.png" ></a> |
| <p>标准折线图。</p> |
| <p><a class="btn" href="example/line1.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/line2.html"><img src="asset/img/example/line2.png"></a> |
| <p>堆积折线图，支持任意系列堆积。</p> |
| <p><a class="btn" href="example/line2.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/line5.html"><img src="asset/img/example/line5.png"></a> |
| <p>标准折线图，横纵坐标轴互换。</p> |
| <p><a class="btn" href="example/line5.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/line3.html"><img src="asset/img/example/line3.png"></a> |
| <p>标准面积图。</p> |
| <p><a class="btn" href="example/line3.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/line4.html"><img src="asset/img/example/line4.png"></a> |
| <p>堆积面积图，支持任意系列堆积。</p> |
| <p><a class="btn" href="example/line4.html">View details »</a></p> |
| </div><!--/span--> |
| |
| </div> |
| </div> |
| <hr> |
| <h1>柱状图</h1> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/bar1.html"><img src="asset/img/example/bar1.png"></a> |
| <p>标准柱状图。</p> |
| <p><a class="btn" href="example/bar1.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/bar2.html"><img src="asset/img/example/bar2.png"></a> |
| <p>堆积柱状图，支持任意系列堆积。</p> |
| <p><a class="btn" href="example/bar2.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/bar3.html"><img src="asset/img/example/bar3.png"></a> |
| <p>标准条状图。</p> |
| <p><a class="btn" href="example/bar3.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/bar4.html"><img src="asset/img/example/bar4.png"></a> |
| <p>堆积条状图，支持任意系列堆积。</p> |
| <p><a class="btn" href="example/bar4.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/bar5.html"><img src="asset/img/example/bar5.png"></a> |
| <p>标准条状图，正负值混合。</p> |
| <p><a class="btn" href="example/bar5.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| <hr> |
| <h1>饼图</h1> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/pie1.html"><img src="asset/img/example/pie1.png"></a> |
| <p>标准饼图。</p> |
| <p><a class="btn" href="example/pie1.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/pie2.html"><img src="asset/img/example/pie2.png"></a> |
| <p>标准环形图。</p> |
| <p><a class="btn" href="example/pie2.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/pie3.html"><img src="asset/img/example/pie3.png"></a> |
| <p>嵌套饼图。</p> |
| <p><a class="btn" href="example/pie3.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| <hr> |
| <h1>混合</h1> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/mix1.html"><img src="asset/img/example/mix1.png"></a> |
| <p>折线图与柱状图混合，双数值轴。</p> |
| <p><a class="btn" href="example/mix1.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/mix2.html"><img src="asset/img/example/mix2.png"></a> |
| <p>柱状图与饼图混合。</p> |
| <p><a class="btn" href="example/mix2.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/lasagna.html"><img src="asset/img/example/lasagna.png"></a> |
| <p>多层嵌套环形图。</p> |
| <p><a class="btn" href="example/lasagna.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| <hr> |
| <h1>其他</h1> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/dataZoom1.html"><img src="asset/img/example/datazoom1.png"></a> |
| <p>数据区域缩放</p> |
| <p><a class="btn" href="example/dataZoom1.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/loading.html"><img src="asset/img/example/loading.png"></a> |
| <p>加载中（Loading）</p> |
| <p><a class="btn" href="example/loading.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| <hr> |
| <h1>个性化</h1> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/line.html"><img src="asset/img/example/line.png"></a> |
| <p>折线图：个性化填充、线条、拐点样式等~</p> |
| <p><a class="btn" href="example/line.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/bar.html"><img src="asset/img/example/bar.png"></a> |
| <p>柱状图：个性化柱形宽度，填充、高亮样式等~</p> |
| <p><a class="btn" href="example/bar.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/pie.html"><img src="asset/img/example/pie.png"></a> |
| <p>饼图：个性化填充、标签文本、视觉引导线样式等~</p> |
| <p><a class="btn" href="example/pie.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| <div class="row-fluid"> |
| <div class="span12"> |
| <div class="span4"> |
| <a href="example/axis.html"><img src="asset/img/example/axis.png"></a> |
| <p>坐标系：个性化标签文字、间隔线、间隔区域样式等~</p> |
| <p><a class="btn" href="example/axis.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/dataZoom.html"><img src="asset/img/example/datazoom.png"></a> |
| <p>数据区域缩放：个性化数据阴影、背景、拖拽手柄样式等~</p> |
| <p><a class="btn" href="example/dataZoom.html">View details »</a></p> |
| </div><!--/span--> |
| <div class="span4"> |
| <a href="example/tooltip.html"><img src="asset/img/example/tooltip.png"></a> |
| <p>提示框：个性化文字样式、边框、背景、格式器等~</p> |
| <p><a class="btn" href="example/tooltip.html">View details »</a></p> |
| </div><!--/span--> |
| </div> |
| </div> |
| |
| <hr> |
| <footer> |
| <p class="pull-right"><a href="#">Back to top</a></p> |
| <p>© 2013 Ecom-FE. · <a href="#">Privacy</a> · <a href="#">Terms</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> |
| |
| </body> |
| </html> |
