| <!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="robots" content="noindex, nofollow"> |
| <title>ECharts2 · Feature</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]--> |
| </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 supports 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> Compatible with most common browsers — including IE6/7/8/9+, Chrome, Firefox, Safari and Opera. <i><br/> (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"> |
| <img src="./asset/img/why-echarts-m-en.png" alt="Why Echarts?" style="float:right;width:180px;margin-right:30px;"/> |
| <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#-en" 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#-en" 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#-en" 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#-en" 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#-en" 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#-en" target="_blank">this 》</a></p> |
| </div> |
| </div> |
| |
| <div class="row featurette"> |
| <div class="col-md-6"> |
| <h2 class="featurette-heading">MarkPoint & 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 »</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#-en" target="_blank">try this »</a></p> |
| <p>Event debugging <a href="./example/event.html#-en" target="_blank">Try this »</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#-en" target="_blank">bar »</a>、<a href="./example/scatter4.html#-en" target="_blank">scatter »</a>、<a href="./example/pie7.html#-en" target="_blank">pie »</a>、<a href="./example/map14.html#-en" 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> |
