| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <title>Why Echarts?</title> | |
| <link rel="stylesheet" href="css/why-echarts-m.css"> | |
| <script src="../asset/js/jquery.min.js"></script> | |
| <script src="js/dist/echarts.js"></script> | |
| <style type="text/css"> | |
| .error { | |
| color: #f66; | |
| } | |
| .success { | |
| color: orange; | |
| } | |
| .echarts-tooltip { | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <div id="p-up" class="page-up disabled">《 Last</div> | |
| <div id="p-down" class="page-down">Next 》</div> | |
| </div> | |
| <div id="content"> | |
| <section class="section active" style="left:0" id="first"> | |
| <img src="../asset/img/about/HelloWorld2.png" alt="ECharts" style="max-width:100%;max-height:100%;margin-bottom:10px;"> | |
| <h1>- ECharts Mobile Launch -</h1> | |
| <small style="line-height:38px;">ECharts-m 1.0.0 ( beta )</small> | |
| </section> | |
| <section class="section"> | |
| <h1 style="padding:20px 0">Innumerable charts library!</h1> | |
| <hr/> | |
| <h2 style="padding:20px 0"> | |
| Why <strong style="color:#9acd32">ECharts</strong> ? | |
| </2> | |
| </section> | |
| <section class="section"> | |
| <h1 style="padding:20px 0">Data Interactive Visualization</h1> | |
| <p class="fragment"> | |
| <small> | |
| <br/>Data visualization with an <strong>interactive graphical user interface (GUI)</strong>. | |
| Data's visual presentation is <strong>not only for statement</strong>, bug also for <strong>data mining, integration</strong> to the data presented. | |
| Make data visualization to be a way of people's <strong>visual thinking</strong>. | |
| </small> | |
| </p> | |
| <br/> | |
| <hr> | |
| <p style="padding:20px 0"> | |
| <small>Let's find out what <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has done for this purpose?</small> | |
| </p> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="calculable"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="magicType"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="dataRange"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="dataZoom"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="timeline"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="scatter"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="force"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="gauge"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="funnel"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" optionKey="mix"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" style="height:500px;background-color:transparent" optionKey="effect2"></div> | |
| </section> | |
| <section class="section"> | |
| <div class="main" style="height:500px;background-color:transparent" optionKey="effect3"></div> | |
| </section> | |
| <section class="section"> | |
| <h4>ECharts VS Excel</h4> | |
| <p class="fragment"> | |
| <small>Although those chart provided by Excel have no interaction at all, but its rich chart type and configuration, easy to use, Excel is the most commonly data statistics tools.</small> | |
| </p> | |
| <div> | |
| <table style="margin-top:20px;"> | |
| <thead> | |
| <tr><th>#</th><th>ECharts</th><th>Excel</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>Histogram</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Bar</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Line</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Area</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Scatter</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Bubble</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>K</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Pie</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Doughnut</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Radar</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Force</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Chord</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Surface</td><td class='error'>No</td><td>Yes</td></tr> | |
| <tr><td>Map</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>EventRiver</td><td>Yes</td><td class='error'>No</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h4>ECharts VS Highcharts (1)</h4> | |
| <p class="fragment"> | |
| <small>The industry has countless JS chart, many outstanding representative, like chartjs, FusionCharts, amCharts, flot, RGraph, jqPlot, gRaphaël etc. Some are free and even open source, while others are commercial, you can find them easily.</small> | |
| <br/> | |
| <small>Unable to compare with them all, let's choose Highcharts, an excellent, mature business chart library which is widely known in the world. | |
| <br/>First about the <strong>charts type</strong>? | |
| </small> | |
| </p> | |
| <div> | |
| <table> | |
| <thead> | |
| <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>Histogram（Bar）</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Line（Area）</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Pie（Doughnut）</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Scatter（Bubble）</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Radar</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>K</td><td>Yes</td><td class='success'>Highstock</td></tr> | |
| <tr><td>Force</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Chord</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Map</td><td>Yes</td><td class='success'>Highmap</td></tr> | |
| <tr><td>EventRiver</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Special（Gauge, Funnel）</td><td>Yes</td><td>Yes</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h4>ECharts VS Highcharts (2)</h4> | |
| <p class="fragment"> | |
| <small>Let's look at the <strong>features</strong>?</small> | |
| </p> | |
| <div> | |
| <table style="width:105%"> | |
| <thead> | |
| <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>Drag-Recalculate</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Data View</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Magic Switch</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Scale Roaming</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Large-scale Data</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Glare Effect</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Linkage</td><td>Yes</td><td class='error'>No</td></tr> | |
| <tr><td>Space Zoom</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Legend Switch</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Multi-dimensional Stacking</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Mixed Charts</td><td>Yes</td><td>Yes</td></tr> | |
| <tr><td>Image Export</td><td>Yes</td><td>Yes</td></tr> | |
| <tr> | |
| <td>License<br/>&<br/>Pricing</td> | |
| <td class='success'>Baidu<br/><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">BSD</a><br/>Free</td> | |
| <td class='success'>Non-commercial<br/>free under CC3.0<br/>Commercial licenses<br/>$90~$3600</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h4>This is ECharts</h4> | |
| <p class="fragment"> | |
| <small>We just try our best to show the <span style="color:#f50">real</span> data for you,</small> | |
| </p> | |
| <p class="fragment"> | |
| <small>and provides an intuitive, easy-to-use interactive way to help you to deal with <span style="color:#f50">data mining, extraction, correction or consolidation</span>, <br/><strong>（Drag-Recalculate, Data View）</strong></small> | |
| </p> | |
| <p class="fragment"> | |
| <small>so that you can <span style="color:#f50">focus on</span> what you care about,<br/><strong>（Legend Switch, Space Zoom, Scale Roaming）</strong></small> | |
| </p> | |
| <p class="fragment"> | |
| <small>have <span style="color:#f50">different interpretation</span> to the same data in different ways.<br/><strong>（Magic Switch, Multi-dimensional Stacking, Linkage, Mixed Charts）</strong></small> | |
| </p> | |
| <div class="fragment"> | |
| <hr/> | |
| <p> | |
| <small><strong>Time to re-define the chart</strong>, browse the charts outputed by ECharts, you no longer just a "reader", you can participate. This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, an powerfull data visualizaiont tool with interactive graphical user interface.</small> | |
| </p> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h4>Acknowledgement</h4> | |
| <p class="fragment"><small> | |
| <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> cann't grow up without their excellent contributions :<br/> | |
| <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a> | |
| <a href="http://weibo.com/pissang" target="_blank">@pissang</a> | |
| <a href="http://weibo.com/errorrik" target="_blank">@errorrik</a> | |
| <a href="http://weibo.com/forain" target="_blank">@diysimon</a> | |
| <a href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a> | |
| <a href="http://weibo.com/u/2810393271" target="_blank">@邓红启</a> | |
| <a href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a> | |
| <a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a> | |
| </small></p><br/> | |
| <p class="fragment"> | |
| <small>With their encouragement and support :<br/> | |
| <a href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a> | |
| <a href="http://weibo.com/u/2042635201" target="_blank">@李湛lizhan</a> | |
| <a href="http://weibo.com/wfsr" target="_blank">@i我佛山人</a> | |
| <a href="http://weibo.com/firede" target="_blank">@赵雷_Firede</a> | |
| <a href="http://weibo.com/zhouyummy" target="_blank">@Yummy_zhou</a> | |
| </small></p><br/> | |
| <p class="fragment"> | |
| <small>Also, it's nice being with you...<br/> | |
| <a href="http://weibo.com/u/2006785117" target="_blank">@财财某</a> | |
| <a href="http://weibo.com/shenhaolaoshi" target="_blank">@沈浩老师</a> | |
| <a href="http://weibo.com/cosname" target="_blank">@统计之都</a> | |
| <a href="http://weibo.com/u/1494921451" target="_blank">@大数据文摘</a> | |
| </small></p><br/> | |
| <p class="fragment"> | |
| <small>Finally, you'd be welcome to <a href="https://github.com/ecomfe/echarts" target="_blank">join us</a>~</small> | |
| </p> | |
| </section> | |
| <section class="section"> | |
| <img src="../asset/img/echarts-logo2.png" alt="ECharts" style="width:100px;margin-top:50px;"> | |
| <h1 style="padding:50px 0 20px;">- THE END -</h1> | |
| <p>Thank you</p> | |
| <br/> | |
| <div> | |
| <small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small> | |
| </div> | |
| </section> | |
| </div> | |
| <script src="./js/why-echarts-m-en.js"></script> | |
| </body> | |
| </html> |