提交 e3177a83 编写于 作者: K kener

【new】English home page launch!

上级 92bbc2e1
此差异已折叠。
......@@ -6,12 +6,14 @@ var domMessage = document.getElementById('wrong-message');
var iconResize = document.getElementById('icon-resize');
var needRefresh = false;
var hash = location.hash.replace('#','') || (needMap() ? 'default' : 'macarons');
var enVersion = location.hash.indexOf('-en') != -1;
var hash = location.hash.replace('-en','');
hash = hash.replace('#','') || (needMap() ? 'default' : 'macarons');
hash += enVersion ? '-en' : '';
var curTheme;
function requireCallback (ec, defaultTheme) {
curTheme = themeSelector
? defaultTheme
: {};
curTheme = themeSelector ? defaultTheme : {};
echarts = ec;
refresh();
window.onresize = myChart.resize;
......@@ -38,14 +40,14 @@ if (themeSelector) {
myChart.showLoading();
$(themeSelector).val(theme);
if (theme != 'default') {
window.location.hash = value;
window.location.hash = value + (enVersion ? '-en' : '');
require(['theme/' + theme], function(tarTheme){
curTheme = tarTheme;
setTimeout(refreshTheme, 500);
})
}
else {
window.location.hash = '';
window.location.hash = enVersion ? '-en' : '';
curTheme = {};
setTimeout(refreshTheme, 500);
}
......@@ -54,9 +56,9 @@ if (themeSelector) {
myChart.hideLoading();
myChart.setTheme(curTheme);
}
if ($(themeSelector).val(hash).val() != hash) {
if ($(themeSelector).val(hash.replace('-en', '')).val() != hash.replace('-en', '')) {
$(themeSelector).val('macarons');
hash = 'macarons';
hash = 'macarons' + enVersion ? '-en' : '';
window.location.hash = hash;
}
}
......@@ -167,7 +169,7 @@ else {
require(
[
'echarts',
'theme/' + hash,
'theme/' + hash.replace('-en', ''),
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
......
var version = '2.0.4';
var curPage = location.href.match(/(\w*).html/) ? location.href.match(/(\w*).html/)[1] : 'index';
var sp = location.href.lastIndexOf('/');
var ep = location.href.lastIndexOf('.html');
var curPage = sp < ep ? location.href.slice(sp + 1, ep) : 'index';
var enVersion = (location.hash && location.hash.indexOf('-en') != -1)
|| location.href.indexOf('-en') != -1;
var activeClass = {};
var loc = {};
var forkWidth = 149;
curPage = curPage.replace('-en', '');
var isExample = false;
switch (curPage) {
case 'index' :
activeClass[curPage] = 'active';
......@@ -26,6 +32,7 @@ switch (curPage) {
loc.index = '..';
break;
default :
isExample = true;
forkWidth = 60;
activeClass['example'] = 'active';
loc.index = '../..';
......@@ -48,17 +55,26 @@ $('#head')[0].innerHTML =
+ '<span class="icon-bar"></span>'
+ '<span class="icon-bar"></span>'
+ '</button>'
+ '<a class="navbar-brand" href="http://echarts.baidu.com">ECharts</a>'
+ '<a class="navbar-brand" href="http://echarts.baidu.com/index'
+ (enVersion ? '-en': '')
+ '.html">ECharts</a>'
+ '</div>'
+ '<a href="https://github.com/ecomfe/echarts" target="_blank">'
+ '<img id="fork-image" style="position:absolute;top:0;right:0;border:0;z-index:1000;width:' + forkWidth + 'px" src="'+ (loc.img || '.') + '/asset/img/fork.png" alt="Fork me on GitHub">'
+ '</a>'
+ '<div class="navbar-collapse collapse" id="nav-wrap">'
+ '<ul class="nav navbar-nav navbar-right" id="nav" style="max-width:100%;">'
+ '<li class="' + (activeClass.index || '') + '"><a href="' + (loc.index || '.') + '/index.html">首页</a></li>'
+ '<li class="' + (activeClass.feature || '') + '"><a href="' + (loc.feature || '.') + '/feature.html">特性</a></li>'
+ '<li class="' + (activeClass.example || '') + '"><a href="' + (loc.example || '.') + '/example.html">实例</a></li>'
+ '<li class="' + (activeClass.doc || '') + '"><a href="' + (loc.doc || '.') + '/doc.html">文档</a></li>'
+ (enVersion
? ('<li class="' + (activeClass.index || '') + '"><a href="' + (loc.index || '.') + '/index-en.html">Home</a></li>'
+ '<li class="' + (activeClass.feature || '') + '"><a href="' + (loc.feature || '.') + '/feature-en.html">Feature</a></li>'
+ '<li class="' + (activeClass.example || '') + '"><a href="' + (loc.example || '.') + '/example-en.html">Example</a></li>'
+ '<li class="' + (activeClass.doc || '') + '"><a href="' + (loc.doc || '.') + '/doc-en.html">API & Doc</a></li>'
)
: ('<li class="' + (activeClass.index || '') + '"><a href="' + (loc.index || '.') + '/index.html">首页</a></li>'
+ '<li class="' + (activeClass.feature || '') + '"><a href="' + (loc.feature || '.') + '/feature.html">特性</a></li>'
+ '<li class="' + (activeClass.example || '') + '"><a href="' + (loc.example || '.') + '/example.html">实例</a></li>'
+ '<li class="' + (activeClass.doc || '') + '"><a href="' + (loc.doc || '.') + '/doc.html">文档</a></li>'
))
/*
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">教学 <b class="caret"></b></a>'
......@@ -72,14 +88,18 @@ $('#head')[0].innerHTML =
+ '</li>'
*/
+ '<li class="dropdown">'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">下载 <b class="caret"></b></a>'
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">' + (enVersion ? 'Download' : '下载') + '<b class="caret"></b></a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="http://echarts.baidu.com/build/echarts-' + version + '.zip"> echarts-' + version + '</a></li>'
+ '<li><a href="http://echarts.baidu.com/build/echarts-1.4.1.zip"> echarts-1.4.1</a></li>'
+ '</ul>'
+ '</li>'
//+ '<li><a href="http://echarts.baidu.com/build/echarts-' + version + '.rar">下载</a></li>'
+ '<li class="' + (activeClass.about || '') + '"><a href="' + (loc.about || '.') + '/about.html">关于我们</a></li>'
+ (enVersion
? ('<li class="' + (activeClass.about || '') + '"><a href="' + (loc.about || '.') + '/about-en.html">About Us</a></li>')
: ('<li class="' + (activeClass.about || '') + '"><a href="' + (loc.about || '.') + '/about.html">关于我们</a></li>')
)
+ '<li><a href="javascript:void()" onclick="changeVersion()">' + (enVersion ? '中文' : 'English') + '</a></li>'
+ '</ul>'
+ '</div><!--/.nav-collapse -->'
+ '</div>';
......@@ -88,12 +108,25 @@ function back2Top() {
$("body,html").animate({scrollTop:0},1000);
return false;
}
function changeVersion() {
if (!isExample) {
window.location = curPage + (enVersion ? '' : '-en') + '.html'
}
else {
window.location = curPage + '.html' + (enVersion ? '' : '#-en');
if (enVersion) {
window.location.hash = window.location.hash.replace('-en', '');
}
window.location.reload();
}
}
$('#footer')[0].style.marginTop = '50px';
$('#footer')[0].innerHTML =
'<div class="container">'
+ '<div class="row" style="padding-bottom:20px;">'
+ '<div class="col-md-3">'
+ '<p>友情链接</p>'
+ '<p>' + (enVersion ? 'Link' : '友情链接') + '</p>'
+ '<ul>'
+ '<li><a href="http://tushuo.baidu.com/" target="_blank">Baidu 图说</a></li>'
+ '<li><a href="http://efe.baidu.com" target="_blank">Baidu EFE</a></li>'
......@@ -102,15 +135,15 @@ $('#footer')[0].innerHTML =
+ '</ul>'
+ '</div>'
+ '<div class="col-md-3">'
+ '<p>更多</p>'
+ '<p>' + (enVersion ? 'More' : '更多') + '</p>'
+ '<ul>'
+ '<li><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a></li>'
+ '<li><a href="http://echarts.baidu.com/doc/changelog.html" target="_blank">Changelog</a></li>'
+ '<li><a href="http://www.oschina.net/p/echarts" target="_blank">开源中国</a></li>'
+ '<li><a href="http://www.oschina.net/p/echarts" target="_blank">' + (enVersion ? 'Open Source China' : '开源中国') + '</a></li>'
+ '</ul>'
+ '</div>'
+ '<div class="col-md-3">'
+ '<p>联系我们</p>'
+ '<p>' + (enVersion ? 'Contact Us' : '联系我们') + '</p>'
+ '<ul>'
+ '<li><a href="mailto:echarts(a)baidu.com">echarts(a)baidu.com</a></li>'
+ '<li><a href="https://github.com/ecomfe/echarts" target="_blank"> Github</a></li>'
......@@ -118,7 +151,7 @@ $('#footer')[0].innerHTML =
+ '</ul>'
+ '</div>'
+ '<div class="col-md-3 flogo">'
+ '<a href="javascript:void(0)" onclick="back2Top()" title="回到顶部"><img src="'+ (loc.img || '.')+ '/asset/img/echarts-logo2.png" alt="ECharts"/></a>'
+ '<a href="javascript:void(0)" onclick="back2Top()" title="' + (enVersion ? 'Back to top' : '回到顶部') + '"><img src="'+ (loc.img || '.')+ '/asset/img/echarts-logo2.png" alt="ECharts"/></a>'
+ '</div>'
+ '</div>'
+ '<p class="pull-right"><a href="javascript:void(0)" onclick="back2Top()" >Back to top</a></p>'
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
<!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="linzhifeng@baidu.com">
<title>ECharts · Feature</title>
<link rel="shortcut icon" href="./asset/ico/favicon.png">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/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>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="row featurette">
<h2 class="featurette-heading">Architecture</h2>
<div class="col-md-7 pull-right" style="padding:0;margin-top:-60px;">
<img src="./asset/img/architecture.png" alt="ECharts Architecture" style="max-width: 100%;"/>
</div>
<p class="lead">ECharts (Enterprise Charts)</p>
<p>ECharts is a comprehensive charting library offering a painless way of adding interactive charts to your commercial products. On the foundation of <a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>-based (a whole new lightweight canvas library) coordinate system, legend, tooltip, toolbox and other basic components, ECharts currently support line, column, scatter, pie, radar, candlestick, chord, gauge, funnel, map and force-directed chart types, many of these can be combined in one chart.</p>
<div style="float:left;margin:20px 10px 30px 10px;"><img src="./asset/img/device.png" alt="Echarts device"/></div>
<div>
<img src="./asset/img/explorer.png" alt="Echarts explorer"/>
<div>
<small>&nbsp;&nbsp;Compatible with most common browsers — including IE6/7/8/9+, Chrome, Firefox, Safari and Opera. <i><br/>&nbsp;&nbsp;(IE8- powered by <a href="https://code.google.com/p/explorercanvas/" target="_blank">excanvas</a> )</i></small>
</div>
</div>
<p style="float:right;text-align:right;"><strong>-- Open source from the team of Baidu business front-end data visualization</strong><br/><span><a href="http://im.baidu.com/" target="_blank">Baidu Hi</a> : 1379172 | <a href="mailto:echarts(a)baidu.com">echarts(a)baidu.com</a></span></p>
</div>
<div class="row featurette">
<h2 class="featurette-heading">Features</h2>
<p>You are cordially invited to view the document "<a href="./slide/whyEcharts-en.html" target="_blank">Why ECharts?</a>" online, which covers all the chart types and major features of ECharts.<br/>
<small>*Since some features of the document don't work with IE8-, you are specifically recommended to read the document in IE9+, Chrome, Firefox, Safari, Opera or other modern browsers.</small>
</p>
</div>
<div class="row featurette">
<div class="col-md-5">
<img src="./asset/img/mix.jpg" alt="Echarts mix"/>
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Combinations</h2>
<p>Compared with a single chart, a combination of charts can be more expressive and more interesting. ECharts supports any combination of any chart provided herein (a total of 11 types and 17 subtypes) : </p>
<p>Line (area), column (bar), scatter (bubble), candlestick,<br/>Pie (doughnut), radar, map, chord, gauge, funnel, force-directed chart. </p>
<p>A standard combination chart contains a legend, toolbox, data area zoom, scale roaming module, a Cartesian coordinate system (which may have one or two category/value axis/axes). </p>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<h2 class="featurette-heading">Drag-Recalculate</h2>
<p>Our "Drag-Recalculate" feature (patented) brings you the best user experience ever: by allowing you to effectively extract, integrate, or even exchange data among multiple charts, ECharts open you up every opportunity for data mining and integration.</p>
</div>
<div class="col-md-6">
<img src="./asset/img/draggable.gif" alt="Echarts Drag-Recalculate"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<img src="./asset/img/dataView.gif" alt="Echarts dataView"/>
</div>
<div class="col-md-6">
<h2 class="featurette-heading">Data View</h2>
<p> If the data means a lot to you, simply viewing the visualized data will no longer be satisfying, and you'll start to wish that you can download, save, share, or even process and integrate the original data.</p>
<p>Now, it ceased to be a dream as we give you a comma-delimited data text, which is our Data View. Of course, you can always reload the output method of Data View to present your data your way. </p>
<p>Moreover, via Data View you the wise can even edit your data and update the chart, which, compared with Drag-Recalculate, is batch operation!</p>
</div>
</div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Magic Switch</h2>
<p>All charts present data. However, it's hard to tell which one is best since the performance depends on so many things: data itself, user's need, personal preference, etc. For example, it's always a big headache to choose between bar and line, stack and tile. </p>
<p>With our Magic Switch, you can switch your chart effortlessly! Try to switch from bar to line, stack to tile, and you may well understand what suits you best.</p>
</div>
<div class="col-md-5">
<img src="./asset/img/magicType.gif" alt="Echarts Magic Switch"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<img src="./asset/img/legendSelected.gif" alt="Echarts Legend Switch"/>
</div>
<div class="col-md-6">
<h2 class="featurette-heading">Legend Switch</h2>
<p>Multi-series of data show you multiple things, but how to focus on the single series that matters? </p>
<p>With our Legend Switch, you can turn off other series and focus on the series you are interested in with just a click. </p>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<h2 class="featurette-heading">Area Zoom</h2>
<p>Data can be infinite, but the display space is always limited. So you need Area Zoom to help you zoom in on a selected data area that you care about. </p>
<p>Powered by great capability of data analysis, the Extreme MarkPoint and the Average MarkLine are always moving in lockstep. Try <a href="./example/mix10.html" target="_blank">this 》</a></p>
</div>
<div class="col-md-6">
<img src="./asset/img/datazoom.gif" alt="Echarts Area Zoom"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-4">
<img src="./asset/img/connect.gif" alt="Echarts Chart Linkage"/>
</div>
<div class="col-md-8">
<h2 class="featurette-heading">Chart Linkage</h2>
<p>You've got multiple series of data to plot. They're associated and inseparable. But if you put them into one chart, it would be a mess sometimes. What could you do?</p>
<p>With the Chart Linkage of ECharts, multiple charts can be easily linked up. And it's not just about displaying informative tooltips when hovered over; it's about sharing components and events, and stitching together automatically when saved as image. Try <a href="./example/mix8.html" target="_blank">this 》</a></p>
</div>
</div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Scale Roaming</h2>
<p>The colors in a Cartesian chart (like map or scatter) will help you to classify data at first glance. </p>
<p>But how to focus on data that matters after the initial analysis? With our Scale Roaming, you can turn off other scales and focus on the scale you are interested in with just a click.</p>
</div>
<div class="col-md-5">
<img src="./asset/img/dataRange.gif" alt="Echarts Scale Roaming"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-4">
<img src="./asset/img/effect.gif" alt="Echarts Glow Effect"/>
</div>
<div class="col-md-8">
<h2 class="featurette-heading">Glow Effect</h2>
<p> We know that sometimes you gotta catch the eye. </p>
<p>ECharts allow you to add a <a href="./example/map12.html" target="_blank">glow effect</a> to the MarkPoints and MarkLines of your charts or maps in the twinkling of an eye. Here is an example of how twinkling it can be: <a href="./example/map11.html" target="_blank">simulation of Baidu migration.</a></p>
</div>
</div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Big Data Mode</h2>
<p>Got tens of millions of data to present? And once again professional statistical tools (e.g. MATLAB) seems like the only option left?</p>
<p>Nope, not anymore! Despite rich interactivity, ECharts can still plot up to 200,000 data points on a Cartesian chart (line, column, scatter, and candlestick) in the blink of an eye. For conventional applications, modern browsers would be all you need to show a million data points.</p>
</div>
<div class="col-md-5">
<img src="./asset/img/scatter.gif" alt="Echarts Large Scale Scatter"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-3">
<img src="./asset/img/dynamic1.gif" alt="Echarts Data Streaming"/>
</div>
<div class="pull-left">
<img src="./asset/img/dynamic2.gif" alt="Echarts Data Streaming" style="height:175px"/>
</div>
<div class="col-md-6">
<h2 class="featurette-heading">Data Streaming</h2>
<p>If you need to display up-to-second data, data streaming charts really hit the spot, for they will automatically update themselves every 'n' seconds by getting new data from the server. </p>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<h2 class="featurette-heading">Auxiliary Line</h2>
<p>Trend line, average line, ascending trend channel, support… of course you know how to use them. </p>
<p> ECharts allow you to add auxiliary lines not only on candlestick – which is a must – but also on every single chart type we support.</p>
</div>
<div class="col-md-6">
<img src="./asset/img/mark.gif" alt="Echarts Auxiliary Lines"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<img src="./asset/img/multiStack.png" alt="Echarts Multi-Series Stacking"/>
</div>
<div class="col-md-6">
<h2 class="featurette-heading">Multi-Series Stacking</h2>
<p>ECharts is much smarter than you thought: with our auto-scaling graph entities and Cartesian coordinate system, you can stack multiple series of data any way you want.</p>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<h2 class="featurette-heading">Sub-Region Mode</h2>
<p>In ECharts, we support World Map, China Map, Map of China Provinces & Cities. We also support sub-region mode, which develops sub-region maps from the main map types. In fact, ECharts can easily output the sketch maps of 176 countries and regions worldwide as well as over 600 cities nationwide. Try <a href="./example/map8.html" target="_blank">this 》</a></p>
</div>
<div class="col-md-6">
<img src="./asset/img/subMapType.png" alt="Echarts Sub-Region Map"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<img src="./asset/img/example/map7.png" alt="Echarts Standard GeoJson Extension"/>
</div>
<div class="col-md-6">
<h2 class="featurette-heading">GeoJson Map Extension</h2>
<p>By compressing the standard GeoJson geographic data with efficient compression algorithm, we get the map data (only about 30% the size of the original standard geoJson data) to drive our built-in maps. If the built-in map data or types do not meet your project needs, you can always produce a new type yourself through simple dynamic registration. Try <a href="./example/map7.html" target="_blank">this 》</a></p>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<h2 class="featurette-heading">MarkPoint &amp; MarkLine</h2>
<p>We are fully aware of the need for adding extra markPoints and markLines: we know you want to mark certain positions on map, extreme points on line and trend line on column...And that's why we make our markPoints and markLines applicable to all the chart types in ECharts library, and more than that: markPoints and markLines in ECharts boast interactive features responsive to components like Legend Switch and Scale Roaming, etc. </p>
</div>
<div class="col-md-3">
<img src="./asset/img/example/line1.png" alt="Echarts MarkPoint & MarkLine" style="height:150px"/>
</div>
<div class="col-md-3">
<img src="./asset/img/example/map9.png" alt="Echarts MarkPoint & MarkLine" style="height:150px"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-3">
<img src="./asset/img/doc/multiControl.jpg" alt="Echarts Multi-level Control" style="height:145px"/>
</div>
<div class="col-md-3">
<img src="./asset/img/custom.png" alt="Echarts High Customizability"/>
</div>
<div class="col-md-6">
<h2 class="featurette-heading">High Customizability</h2>
<p>With over 600 configuration options and the design of multi-level control at hand, you are free to make your chart your way. </p>
<a href="./doc-en.html" target="_blank">Documentation &raquo;</a>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<h2 class="featurette-heading">Event Interaction</h2>
<p>We can capture user interaction and data change events to link chart to each other or the outside world. <a href="./example/mix3.html" target="_blank">try this &raquo;</a></p>
<p>Event debugging <a href="./example/event.html" target="_blank">Try this &raquo;</a></p>
</div>
<div class="col-md-6">
<img src="./asset/img/example/mix3.png" alt="Echarts Event Interaction"/>
</div>
</div>
<div class="row featurette">
<div class="col-md-6">
<img src="./asset/img/example/bar11.png" alt="Echarts Timeline"/>
</div>
<div class="col-md-6">
<h2 class="featurette-heading">Timeline</h2>
<p>Dynamic data analysis is one of the most important features of information visualization. In ECharts, you can pair timeline with any chart type to display how data changes over time. </p>
<p>Try <a href="./example/bar11.html" target="_blank">bar »</a><a href="./example/scatter4.html" target="_blank">scatter »</a><a href="./example/pie7.html" target="_blank">pie »</a><a href="./example/map14.html" target="_blank">map »</a></p>
</div>
</div>
<!-- /END THE FEATURETTES -->
</div>
<!-- FOOTER -->
<footer id="footer"></footer>
<!-- Bootstrap core 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>
</body>
</html>
此差异已折叠。
此差异已折叠。
<!DOCTYPE html>
<html lang="en">
<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="linzhifeng@baidu.com">
<title>ECharts · Start</title>
<link rel="shortcut icon" href="./asset/ico/favicon.png">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/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]-->
<script src="./asset/js/google-code-prettify.js"></script>
<link href="./asset/css/google-code-prettify.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="./asset/css/monokai.css" rel="stylesheet">
<style type="text/css">
.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover {
background-color:rgb(247, 247, 247);
font-weight: bolder;
}
.tab-content {
padding:20px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-top: 0px;
}
</style>
</head>
<body onload="prettyPrint()">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<div class="container">
<h2 class="text-center">5 minutes to your first chart</h2>
<ul class="nav nav-tabs nav-justified">
<li class="active">
<a id = "o-aqi" href="#main0" data-toggle="tab">modular single file import (preferred)</a></li>
<li><a id = "o-pm25" href="#main1" data-toggle="tab">tabbed single file import</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="main0">
<b class="title">1, Creat a echarts.html file. Prepare a Dom with size (width and height) for ECharts.</b>
<pre class="prettyprint"><xmp><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
</body></xmp></pre>
<b class="title">2, Create a &lt; script &gt; tag to include an AMD loader, such as esl.js. </ b></b>
<pre class="prettyprint"><xmp><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- from Baidu's CDN -->
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
</body></xmp></pre>
<b class="title">3, Create a new &lt; script &gt; tag, configure for module loader a path of echarts and the chart you need (the relative path is to link from the current page to echarts.js). For imported chart file, refer to <a href="doc-en.html#Import-ECharts2" target="_blank">Import ECharts2</a></b>
<pre class="prettyprint"><xmp><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- from Baidu's CDN -->
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
// configure for module loader
require.config({
paths:{
'echarts' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
}
});
</script>
</body></xmp></pre>
<b class="title">4, Dynamically load echarts and the chart you need in the &lt; script &gt; tag. Use callback function to initialize and drive the generation of charts. For option, refer to <a href="doc-en.html#Option" target="_blank">API &amp; Doc</a></b>
<pre class="prettyprint"><xmp><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- from Baidu's CDN -->
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
// configure for module loader
require.config({
paths:{
'echarts' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
}
});
// use
require(
[
'echarts',
'echarts/chart/bar' // require the specific chart type
],
function (ec) {
// Initialize after dom ready
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['Sales']
},
xAxis : [
{
type : 'category',
data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"Sales",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// Load data into the ECharts instance
myChart.setOption(option);
}
);
</script>
</body></xmp></pre>
<b>5, Open echarts.html in the browser to see the following results.</b>
</div>
<!------------------------------>
<div class="tab-pane" id="main1">
<b class="title">1, Creat a echarts.html file. Prepare a Dom with size (width and height) for ECharts.</b>
<pre class="prettyprint"><xmp><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
</body></xmp></pre>
<b class="title">2, Create a &lt; script &gt; tag to import echarts-plain.js. For the imported chart file, refer to<a href="doc-en.html#Import-ECharts3" target="_blank">Import ECharts3</a></b>
<pre class="prettyprint"><xmp><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
<!-- Tabbed single file import -->
<script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
</body></xmp></pre>
<b class="title">3, Create a &lt;script&gt; tag. Use global variable echarts to initialize and drive the generation of charts. For option, refer to<a href="doc-en.html#Option" target="_blank">API & Doc</a></b>
<pre class="prettyprint"><xmp><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
<!-- Tabbed single file import -->
<script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
<script type="text/javascript">
// Initialize after dom ready
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['Sales']
},
xAxis : [
{
type : 'category',
data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"Sales",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// Load data into the ECharts instance
myChart.setOption(option);
</script>
</body></xmp></pre>
<b>4, Open echarts.html in the browser to see the following results.</b>
</div>
</div>
<div id="main" style="height:400px;border: 1px solid #dddddd;border-top-width:0"></div>
<div class="row" style="margin-top: 30px;">
<h2>Best Reference Resource: Instances</h2>
<p>ECharts is a data-driven chart. Since your main concern is how to achieve that option, we offer you, right here on our official website, an extensive <a href="./doc-en.html">documentation</a> for your reference and over 100 ready-made <a href="./example-en.html">demos</a> with the most core option code that is free to edit online. For ECharts, play makes perfect; hope you enjoy playing here.</p>
</div>
</div>
<script src="./asset/js/esl/esl.js"></script>
<script type="text/javascript">
require.config({
paths:{
'echarts' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
}
});
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption(option);
}
);
var option = {
tooltip: {
show: true
},
legend: {
//data:['销量']
data:['Sales']
},
xAxis : [
{
type : 'category',
//data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
//"name":"销量",
"name":"Sales",
"type":"bar",
"data":[5,20,40,10,10,20]
}
]
};
</script>
<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>
</body>
</html>
\ No newline at end of file
<!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="linzhifeng@baidu.com">
<title>ECharts · Home</title>
<link rel="shortcut icon" href="./doc/asset/ico/favicon.png">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="./doc/asset/css/bootstrap.css" rel="stylesheet">
<link href="./doc/asset/css/carousel.css" rel="stylesheet">
<link href="./doc/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">
blockquote {
font-size:14px;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="./doc/asset/img/banner1.png" alt="ECharts"/>
</div>
<div class="item">
<img src="./doc/asset/img/banner2.png" alt="ECharts"/>
<div class="container">
<div class="carousel-caption" style="bottom:0;left:25%">
<p style="text-align:left;">
<a class="btn btn-lg btn-warning" href="./doc/example.html#gauge" role="button">View »</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="./doc/asset/img/banner3.png" alt="ECharts"/>
<div class="container">
<div class="carousel-caption" style="bottom:0;left:25%">
<p style="text-align:left;">
<a class="btn btn-lg btn-warning" href="./doc/example/bar12.html" role="button">View »</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="./doc/asset/img/banner4.png" alt="ECharts"/>
<div class="container">
<div class="carousel-caption" style="bottom:0;left:25%">
<p style="text-align:left;">
<a class="btn btn-lg btn-warning" href="./doc/example/theme.html" role="button">View »</a>
</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!--<h1 class="text-center" style="margin-bottom:30px;">让数据说话</h1>-->
<h1 class="text-center" style="margin-bottom:30px;">BRING YOUR DATA TO LIFE</h1>
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="col-lg-12" src="doc/asset/img/feature1.png" alt="Echarts Drag-Recalculate" style="margin-bottom:20px"/>
<h2>DRAG-RECALCULATE</h2>
<p class="text-left">Our "Drag-Recalculate" feature (patented) brings you the best user experience ever: by allowing you to effectively extract, integrate, or even exchange data among multiple charts, ECharts opens you up every opportunity for data mining and integration.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="col-lg-12" src="doc/asset/img/feature2.png" alt="Echarts dataView" style="margin-bottom:20px"/>
<h2>BIG DATA MODE</h2>
<p class="text-left">Got tens of millions of data to present? And once again professional statistical tools (e.g. MATLAB) seems like the only option left? Nope, not anymore! Despite rich interactivity, ECharts can still plot up to 200,000 data points on a Cartesian chart (line, column, scatter, candlestick) in the blink of an eye. </p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="col-lg-12" src="doc/asset/img/feature3.png" alt="Echarts Scale Roaming" style="margin-bottom:20px"/>
<h2>SCALE ROAMING</h2>
<p class="text-left">The colors in the Cartesian chart (like map or scatter) will help you to classify data at first glance. But how to focus on data that matters after the initial analysis? With our "Scale Roaming" feature, you can turn off other scales and focus on the scale you are interested in with just a click.</p>
</div><!-- /.col-lg-4 -->
<p class="pull-right"><a href="doc/feature.html">Read More »</a></p>
</div><!-- /.row -->
<div class="row featurette thx">
<h1 class="text-center">OPINIONS</h1>
<div class="col-lg-6">
<blockquote>
<p>"ECharts is a treasure, not just for China, but also for the world."</p>
<br/>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/shearwarp" target="_blank">Chen Wei, Professor at Zhejiang University</a></small>
</blockquote>
</div>
<div class="col-lg-6">
<blockquote>
<p>"ECharts, the beauty of data visualization!"</p>
<br/>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/shenhaolaoshi" target="_blank">Shen Hao, Professor at Communication University of China</a></small>
</blockquote>
</div>
<div class="col-lg-3">
<blockquote>
<p>"ECharts is not only the best, but also the most improved visualization tool I know. Hopes are high that it will become a world-class open source project before long."</p>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/u/2006785117" target="_blank">Huang Zhimin, CTO of Caixin Media</a></small>
</blockquote>
</div>
<div class="col-lg-6">
<blockquote>
<p>"ECharts is a most impressive tool for data visualization: it's fully open-source, it's sophisticated-yet-flexible, and it keeps abreast of the era of 'big data'! I hope that ECharts will stick to the open source approach and bring into full play the power of community, so as to better serve users at home and abroad and create greater value in business and society."</p>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/DataScientistUnion" target="_blank">Xing Bao, Founder of DataUnion</a></small>
</blockquote>
</div>
<div class="col-lg-3">
<blockquote>
<p>"It is my fervent hope that ECharts 2.0 can make their visualization more vivid, charts more shining, interaction more agreeable and leave their users nothing to worry about."</p>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/u/1688425190" target="_blank">Hong Bei, CTO of AdMaster</a></small>
</blockquote>
</div>
<div class="col-lg-4">
<blockquote>
<p>"We have tried all kinds of charting tools - foreign and domestic, free and paid - for many years, and we say that ECharts absolutely stands out in the free ones, and is even comparable to the best of the paid ones."</p>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/tiemuyu" target="_blank">Yu Jie, GM of ResearchInChina</a></small>
</blockquote>
</div>
<div class="col-lg-4">
<blockquote>
<p>"ECharts is open, simple and elegant. 1.0 was great, and 2.0 was leapfrogged in just a year with something even more amazing. Anecdotally, some of my American friends are learning ECharts with online translators!"</p>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/cosname/" target="_blank">Xie Yihui, Founder of Capital of Statistics</a></small>
</blockquote>
</div>
<div class="col-lg-4">
<blockquote>
<p>"ECharts represents a new generation of visualization tools for big data. I really hope that it will soon support mobile platforms, so that we can have the freedom to explore big data at our fingertips - both literally and figuratively."</p>
<small><i class="fa fa-weibo"></i> <a href="http://weibo.com/austinhu" target="_blank">Hu Song, CTO of haizhi</a></small>
</blockquote>
</div>
<div class="col-md-12 user text-center">
<a href="http://www.baidu.com" target="_blank" ><img src="http://www.baidu.com/img/baidu_jgylogo3.gif" alt="Go to the Baidu front page" title="Go to the Baidu front page"></a>
<a href="http://dev2.baidu.com/index.do" target="_blank" ><img src="http://dev2.baidu.com/zh/img/zh-logo.jpg" alt="百度商业开发者中心" title="百度商业开发者中心"></a>
<a href="http://zhanzhang.baidu.com/" target="_blank" ><img src="http://zhanzhang.baidu.com/static/img/zhanzhang_logo.png" alt="百度站长平台" title="百度站长平台"></a>
<a href="http://adm.baidu.com/index.html" target="_blank" ><img src="http://adm.baidu.com/home/common/img/logo.png"></a>
<a href="http://jiaoyu.baidu.com/mp/index" target="_blank" ><img src="http://vs-static.baidu.com/edu/newjuhe/asset/img/logo137.png"></a>
<a href="http://hui.baidu.com/" target="_blank" ><img src="http://vs-static.baidu.com/baiduhui/asset20140623/common/img/logo.png" alt="百度汇" title="百度汇"></a>
<a href="http://sd.baidu.com/zh/" target="_blank" ><img src="http://sd.baidu.com/static/img/common/logo.png"></a>
<a href="http://renqi.baidu.com/" target="_blank" ><img src="http://renqi.baidu.com/static/image/logo.png" style="background-color: #0d5ab1"></a>
<a href="http://trends.baidu.com/" target="_blank" ><img src="http://trends.baidu.com/static/worldcup/home/logo_646fdc96.png" style="background-color: #264597"></a>
<a href="http://msm.zhidao.baidu.com/" target="_blank" ><img src="http://msm.zhidao.baidu.com/static/widget/common/buywhat/buywhat-header/img/logo_1d5d5692.jpg" style="background-color:#4C6EC8"></a>
<a href="http://www.admaster.com.cn/" target="_blank" ><img src="http://www.admaster.com.cn/static/img/logo.png"></a>
<a href="http://www.mi.com/" target="_blank" ><img src="http://img03.mifile.cn/webfile/images/2014/cn/icon/site-logo.png"></a>
<a href="http://www.miaozhen.com/" target="_blank" ><img src="http://www.miaozhen.com/style/images/GW_logo.jpg"></a>
<a href="http://www.semidata.com/index.php" target="_blank" ><img src="http://datavisualization.miaozhen.com/SemiData_logo.png"></a>
<a href="http://www.sgcc.com.cn/" target="_blank" ><img src="http://www.sgcc.com.cn/images/header/header_logo_0106.png"></a>
<a href="http://www.piccnet.com.cn/" target="_blank" ><img src="http://www.piccnet.com.cn/imagess/logo.gif"></a>
<a href="http://www.sinopec.com/" target="_blank" ><img src="http://pic.xooob.com/20081041/2008104133532142.jpg"></a>
<a href="http://www.lenovo.com.cn/" target="_blank" ><img src="http://img.hc360.com/printing/info/images/200812/200812161055278334.jpg"></a>
<a href="http://www.huawei.com/cn/" target="_blank" ><img src="http://www.huawei.com/minisite/mobile_cn/images/Logo.jpg"></a>
<a href="http://www.dangdang.com/" target="_blank" ><img src="http://img4.ddimg.cn/00012/dang/logo_dd.gif"></a>
<a href="http://lashou.com/" target="_blank" ><img src="http://s1.lashouimg.com/static/img/index/logo02.png"></a>
<a href="http://www.vip.com/" target="_blank" ><img src="http://pic.iresearch.cn/news/201304/635018302584062500.jpg"></a>
<a href="http://tv.pptv.com/" target="_blank" ><img src="http://photocdn.sohu.com/20120207/Img334013169.jpg"></a>
<a href="http://www.caixin.com/" target="_blank" ><img src="http://file.caixin.com/file/content/images/new/logo.png"></a>
<a href="http://www.jjckb.cn/" target="_blank" ><img src="http://jjckb.xinhuanet.com/jjimages/jc/images/logo.gif"></a>
<a href="http://news.sina.com.cn/" target="_blank" ><img src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"></a>
<a href="http://news.qq.com/newspedia/all.htm" target="_blank" ><img src="http://mat1.gtimg.com/news/newspedia/images/news_baike.png"></a>
<a href="http://news.qq.com/" target="_blank" ><img src="http://mat1.gtimg.com/news/news2013/LOGO.jpg"></a>
<a href="http://www.shujubang.com/index.html" target="_blank" ><img src="http://www.shujubang.com/Image_New/2014/Master/logo.png"></a>
<a href="http://www.futureweather.cn/" target="_blank" ><img src="http://www.qx17.cn/_c_xKeZGQlsF8eHtUZXc63DP_L01zSR_ao8biwTU2VFqcomEOG4im0Ghomh19TkUeP7kimak9lDWS8Y-8dld2ohLx9bWw6ag9Gu.png"></a>
<a href="http://www.ctrip.com/" target="_blank" ><img src="http://pic.c-ctrip.com/common/c_logo2013_2x.png"></a>
<a href="http://www.jinjianginns.com/" target="_blank" ><img src="http://www.jinjianginns.com/images2/logo.jpg"></a>
<a href="http://www.51job.com/default.php" target="_blank" ><img src="http://img01.51jobcdn.com/im/2009/logo/logo2009.gif"></a>
<!--a href="http://www.asiainfo.com/" target="_blank" ><img src="http://www.asiainfo.com/Portals/0/asiaInfo_Logo.png"></a>
<a href="http://www.yonyou.com/" target="_blank" ><img src="http://www.yonyou.com/images/logo.jpg"></a-->
<div style="font-weight: bolder">...</div>
</div>
</div>
<div class="row featurette" style="padding-bottom: 0;">
<div class="col-md-12">
<h1 class="text-primary" style="margin-bottom: 20px;"><small>The Era of Big Data</small><br/><strong>IT'S TIME TO REDEFINE DATA CHARTS</strong></h1>
<p class="lead">We are just doing our best to present your data in its own <span class="text-primary">true</span> aspect, and provide you with intuitive, interactive ways for data <span class="text-primary">mining, extraction, correction or integration</span>, so that you can <span class="text-primary">focus on</span> what you are interested in. Legend Switch, Area Zoom, and Value Filter let you <span class="text-primary">analyze your data in ways you didn't think possible</span>. </p>
</div>
<div class="col-md-12">
<p class="lead" style="margin-bottom: 0;">Look at the charts created using <span class="text-primary">ECharts</span>, you are no longer just a "reader"; you can also be a "creator". This is <span class="text-primary">ECharts</span>, a <strong class="text-primary">GUI-based</strong> data visualization tool that we are working on.</p>
</div>
</div>
<div class="jumbotron">
<h1 style="font-size: 80px;margin-bottom:30px;">LET'S GO!</h1>
<a class="btn btn-large btn-warning" href="./doc/start-en.html"><i class="fa fa-paper-plane"></i> Get started</a>
</div>
<!-- /END THE FEATURETTES -->
<div class="row featurette e-list" style="padding-bottom: 0;">
<p>ECharts is an open source from the data visualization team of Baidu <a href="http://efe.baidu.com/">EFE</a>. In <a href="http://efe.baidu.com/">EFE</a>, we also have:</p>
<dl>
<dt><a target="_blank" href="https://github.com/ecomfe/esl">ESL</a></dt>
<dd>Leaner, more efficient and more robust AMD Loader than Require.js.</dd>
<dt><a target="_blank" href="http://ecomfe.github.io/etpl/">ETpl</a></dt>
<dd>Reusable, flexible, and high performance JavaScript template engine.</dd>
<dt><a target="_blank" href="https://github.com/ecomfe/edp">EDP</a></dt>
<dd>Provides the front-end development tool: project and package management, debug, build, test etc. and allow users to custom extend.</dd>
<dt><a target="_blank" href="https://github.com/ecomfe/er">ER</a></dt>
<dd>RIA web framework, which is suitable for building a single page AJAX web application.</dd>
<dt><a target="_blank" href="https://github.com/ecomfe/esui">ESUI</a></dt>
<dd>A set of perfect functions, and has strong extension mechanism UI library. Base on template, declarative programming let the View more powerful.</dd>
<dt><a target="_blank" href="http://ecomfe.github.io/est/">EST</a></dt>
<dd>Base on Less style, provide a series of convenient mixin way, can output just in debug mode.</dd>
<dt><a target="_blank" href="https://github.com/ecomfe/saber">Saber</a></dt>
<dd>Provide a JavaScript model, CSS style and development platform etc, which is a complete the front-end solutions for mobile SPA project.</dd>
<dt><a target="_blank" href="https://github.com/ecomfe/rider">Rider</a></dt>
<dd>Designed for mobile device, mixin style library. Base on it, we create the Rider UI, a flexible UI library.</dd>
<dt><a target="_blank" href="http://efe.baidu.com/">......</a></dt>
</dl>
</div>
</div><!-- /.container -->
<!-- FOOTER -->
<footer id="footer"></footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./doc/asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./doc/asset/js/echartsHome.js"></script>
<script src="./doc/asset/js/bootstrap.min.js"></script>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册