other
/
onepage


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
							<!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">《 上一页</div>
        <div id="p-down" class="page-down">下一页 》</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">业界已经有多如牛毛的图表库了！</h1>
            <hr/>
            <h2 style="padding:20px 0">
                Why <strong style="color:#9acd32">ECharts</strong> ?
            </2>
        </section>  
        
        <section class="section">
            <h1 style="padding:20px 0">深度数据互动可视化</h1>
            <p class="fragment">
                <small>打破单纯的视觉呈现，拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化。数据呈现<strong>不仅是诉说</strong>，而是允许用户对所呈现数据进行<strong>挖掘、整合</strong>，让可视化成为<strong>辅助人们进行视觉化思考</strong>的方式。
            </small>
            </p>
            <br/>
            <hr>
            <p style="padding:20px 0">
                <small>让我们看看<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>为此目标做了什么？</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>虽说Excel输出的图表毫无交互性可言，但其丰富的图表类型和配置项，简单易用，无疑是最常用的制作数据统计的工具。那看看ECharts和Excel都支持哪些图表类型？</small>
            </p>
            <div>
                <table style="margin-top:20px;">
                    <thead>
                        <tr><th>#</th><th>ECharts</th><th>Excel</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>柱状图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>条形图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>折线图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>面积图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>散点图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>气泡图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>K线图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>饼图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>环形图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>和弦图</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>曲面图</td><td class='error'>No</td><td>Yes</td></tr>
                        <tr><td>地图</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>事件河流图</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>业界有无数js图表库，不乏优秀的代表，如chartjs，amCharts，FusionCharts，flot，gRaphaël等等。有的是免费甚至开源的，有的则是商业的，百度一下就能找到他们。</small>
                <br/>
                <small>无法跟他们一一对比，在这选择了知名度很高的Highcharts，一个优秀，成熟的商业图表库。
                    <br/>先看看ECharts和Highcharts都支持哪些图表类型？
                </small>
            </p>
            <div>
                <table>
                    <thead>
                        <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>柱状图（条形图）</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>折线图（面积图）</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>饼图（环形图）</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>散点图（气泡图）</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>K线图</td><td>Yes</td><td class='success'>Highstock</td></tr>
                        <tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>和弦图</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>地图</td><td>Yes</td><td class='success'>Highmap</td></tr>
                        <tr><td>事件河流图</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>特色图表（如仪表盘）</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>再来看看ECharts和Highcharts都有哪些特性？</small>
            </p>
            <div>
                <table style="width:105%">
                    <thead>
                        <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>拖拽重计算</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>数据视图</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>动态类型切换</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>值域漫游</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>大规模散点</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>炫光特效</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>多图联动</td><td>Yes</td><td class='error'>No</td></tr>
                        <tr><td>数据区域缩放</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>图例开关</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>多维度堆积</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>混搭</td><td>Yes</td><td>Yes</td></tr>
                        <tr><td>图片导出</td><td>Yes</td><td>Yes</td></tr>
                        <tr>
                            <td>License<br/>&amp;<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>这就是ECharts</h4>
            <p class="fragment">
                <small>我们只是尽我们所能为你呈现数据<span style="color:#f50">真实</span>的一面，</small>
            </p>
            <p class="fragment">
                <small>并且提供了一些直观、易用的交互方式以方便你对所展现数据进行<span style="color:#f50">挖掘、提取、修正或整合</span>，<br/><strong>（拖拽重计算、数据视图）</strong></small>
            </p>
            <p class="fragment">
                <small>让你可以更加<span style="color:#f50">专注</span>于你所关心地方，无论是系列选择、区域缩放还是数值筛选，<br/><strong>（图例开关、数据区域缩放、值域漫游）</strong></small>
            </p>
            <p class="fragment">
                <small>让你可以有<span style="color:#f50">不同的方式解读同样的数据</span>。<br/><strong>（动态类型切换，多维度堆积，多图联动，混搭）</strong></small>
            </p>
            <hr/>
            <div class="fragment">
                <p>
                    <small><strong>重新定义数据图表的时候到了</strong>，浏览ECharts所输出的图表，你不再只是个“读者”，你可以参与其中。
                        <br/><br/>这就是<a href="http://ecomfe.github.io/echarts/" target="_blank" sdtyle="margin:0">ECharts</a>，我们正在打造的一个拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化工具。</small>
            </p>
            </div>
        </section>

        <section class="section">
            <h4>致谢</h4>
            <p class="fragment"><small>
                <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>的发展离不开他们的卓越贡献：<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>以及他们的摇旗呐喊、推波助澜、煽风点火...<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>还有，能得到你们的支持，真好...<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>当然，我们期待你的<a href="https://github.com/ecomfe/echarts" target="_blank">加入</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.js"></script>
</body>
</html>