other
/
onepage_mrhi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
							<!doctype html>
<html>

    <head>
        <meta charset="utf-8">

        <title>Why ECharts</title>

        <meta name="description" content="Why echarts?">
        <meta name="author" content="kener.linfeng@gmail.com">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel="stylesheet" href="css/reveal.min.css">
        <link rel="stylesheet" href="css/theme/default.css" id="theme">

        <!-- For syntax highlighting -->
        <link rel="stylesheet" href="lib/css/zenburn.css">

        <link rel="stylesheet" href="css/echarts-slide.css">
        
        <!-- Fav and touch icons -->
        <link rel="shortcut icon" href="../asset/ico/favicon.png">

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
        <style type="text/css">
            * {
                font-family:'微软雅黑' !important;
            }
            .main, .main2 {
                background-color: #fff;
                background: url('./img/big_load.gif') #fff no-repeat 50% 50%;
                height: 400px;
                overflow: hidden;
                padding : 10px !important;
                border: 1px solid #e3e3e3;
                -webkit-border-radius: 4px;
                   -moz-border-radius: 4px;
                        border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
                   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
                        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            }
            .noLoading {
                background: #fff;
            }
            .main canvas {
               left:0;
               top:0;
            }
            .main div {
                text-align: left !important;
            }
            .echarts-dataview p {
                font-size: 16px !important;
                color:#333;
                text-align: left;
            }
            p, h4 {
                text-align: left !important;
                text-transform: none !important;
            }
            h5 strong, small strong{
                color: #9acd32;
                font-weight: normal !important;
            }
            td,th {
                text-align: center !important;
                font-size: 0.7em !important;
            }
            .reveal small,.reveal a.roll {
                line-height: 1.5em;
            }
            .reveal blockquote {
                width:100%;
            }
            .reveal blockquote small{
                line-height: 1.5em;
            }
            .reveal img.echarts-icon {
                margin:0;
                padding:7px;
                border:0;
                background:none
            }
            .reveal img {
                max-width:100%;
                max-height:100%;
            }
            .reveal .slides>section, .reveal .slides>section>section {
                padding:0;
            }
            .reveal ul ul li {
                font-size:20px;
                color:#78B9E6
            }
        </style>
    </head>

    <body>
        <a href="https://github.com/ecomfe/echarts" target="_blank">
            <img style="position:absolute;top:0;right:0;border:0;z-index:1000" src="img/fork.png" alt="Fork me on GitHub">
        </a>
        <div class="reveal">
            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h1 style="margin:-10px 0 0 0">
                        <img src="./img/echarts_logo.png" style="margin:0;background:rgba(0,0,0,0);border-width: 0;box-shadow: 0 0 0px rgba(0, 0, 0, 0);"/>
                    </h1>
                    <h5>大数据时代，重新定义数据图表的时候到了！</h5><br/>
                    <div>
                        <small>开源来自百度商业前端数据可视化团队</small><br/>
                        <small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
                    </div>
                </section>
                
                <section>
                    <h4>业界已经有多如牛毛的图表库了！</h4>
                    <div class="fragment" style="text-align:right;">
                        <hr/>Why <strong style="color:#9acd32">ECharts</strong> ?
                    </div>
                </section>
                
                <section>
                    <h4 style="color:#9acd32">深度数据互动可视化</h4>
                        <p><small>
                            <br/>打破单纯的视觉呈现，拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化。数据呈现<strong>不仅是诉说</strong>，而是允许用户对所呈现数据进行<strong>挖掘、整合</strong>，让可视化成为<strong>辅助人们进行视觉化思考</strong>的方式。
                        </small></p>
                        <br/>
                     <div class="fragment" style="text-align:right;">
                        <hr>
                        <small>让我们看看<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>为此目标做了什么？<br/>
                            <small>* 下面的内容建议全屏浏览（F11切换）</small>
                        </small>
                    </div>
                </section>

                <section>
                    <section>
                        <h4>[ 拖拽重计算 ] 整合你所关心的数据</h4>
                        <p>
                            <small>图表数据的默认分类不总是满足每一个人的需求。
                                <br/>就像如下的浏览器占比，我想知道IE所占的总比例，是默默的心算还是拿根笔出来？
                            </small>
                        </p>
                        <p class="fragment">
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，试试把你关心的数据图形<strong>拖拽到一起</strong>！</small>
                        </p>
                        <div class="main" optionKey="calculable1"></div>
                    </section>
    
                    <section>
                        <h4>[ 拖拽重计算 ] 剔除畸形数据</h4>
                        <p>
                            <small>不可避免的有些时候会有些畸形数据存在，就像如下的销售数据：
                                <br/>双11的辉煌后你看到了这样统计数据，你得忍受这无多大指导意义统计图表一个月甚至更长时间？
                            </small>
                        </p>
                        <p class="fragment">
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，试试把畸形数据<strong>拖拽出来</strong>！
                                <br/>恩，剔除畸形数据后你好像还惊讶的发现了一个不太乐观的趋势？
                            </small>
                        </p>
                        <div class="main" optionKey="calculable2"></div>
                    </section>
                </section>

                <section>
                    <h4>[ 数据视图 ] 满足用户对数据的需求</h4>
                    <p>
                        <small>如果你所呈现的数据足够让用户所关心，那么他们将不满足于查看可视化的图表：
                            <br/>浪费你服务器上宝贵的磁盘空间去异步生成数据文件？再大动干戈的开发文件下载的轮询请求？
                        </small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，或许你只需给予一个“,”分隔的数据文本他们就懂了，试试<strong>点击这个图标</strong><img src="./img/iconDataView.png" class="echarts-icon"/>！
                            <br/>你甚至可以打开数据视图的<strong>编辑功能</strong>，跟拖拽重计算相比，这可是批量的数据修改！
                        </small>
                    </p>
                    <div class="main" optionKey="dataView"></div>
                </section>

                <section>
                    <section>
                        <h4>[ 动态类型切换 ] 尝试不同类型的图表展现</h4>
                        <p>
                            <small>很多图表类型本身所表现的能力是相似的，但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样，比如折线图和柱状图的选择总是让人头疼？是否使用堆积也是一个艰难的决定？是放弃这个尝试还是重复的写上大段代码？
                            </small>
                        </p>
                        <p class="fragment">
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了动态类型切换功能，让用户随心所欲的切换图表类型和堆积平铺状态。
                                <br/>试试把柱状图<img src="./img/iconBarChart.png" class="echarts-icon"/><strong>切换</strong>成折线图<img src="./img/iconLineChart.png" class="echarts-icon"/>，或者切换堆积平铺状态<img src="./img/iconStack.png" class="echarts-icon"/>，你会对这份数据有更多的解读。</small>
                        </p>
                        <div class="main" optionKey="magicType"></div>
                    </section>
                    <section>
                        <h4>[ 动态类型切换 ] 尝试不同类型的图表展现</h4>
                        <p>
                            <small>很多图表类型本身所表现的能力是相似的，但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样，是放弃这个尝试还是重复的写上大段代码？
                            </small>
                        </p>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了动态类型切换功能。不同的图形表达去展现同样的数据，或许你会对这份数据有更多的解读。</small>
                        </p>
                        <div class="main" optionKey="magicType2"></div>
                    </section>
                    <section>
                        <h4>[ 动态类型切换 ] 尝试不同类型的图表展现</h4>
                        <p>
                            <small>很多图表类型本身所表现的能力是相似的，但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样，是放弃这个尝试还是重复的写上大段代码？
                            </small>
                        </p>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了动态类型切换功能。不同的图形表达去展现同样的数据，或许你会对这份数据有更多的解读。</small>
                        </p>
                        <div class="main" optionKey="legendSelected"></div>
                    </section>
                </section>

                <section>
                    <h4>[ 值域漫游 ] 聚焦到你所关心的数值上</h4>
                    <p>
                        <small>基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布：
                            <br/>但如何聚焦到我所关心的数值上？比如我只想查看top 10%的地域有哪些？又找笔了？
                        </small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们创造了称为值域漫游的功能，尝试<strong>上下拖拽</strong>左下角的那个控件，甚至单纯的鼠标移动时你就发现了神奇的事情！他表达的意义并不需要过多的解析，看起来就像是理所当然的！<br/>
                        </small>
                    </p>
                    <div class="main" optionKey="dataRange1"></div>
                </section>

                <section>
                    <h4>[ 数据区域缩放 ] 聚焦到你所关心的数据上</h4>
                    <p>
                        <small>显示空间总是有限的，显示一大段时间跨度的数据是常见的需求：
                            <br/>密密麻麻的全放出来？提供一个日历选择器让用户频繁的选择切换？
                        </small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了数据区域缩放功能，带全局数值影子的刻度条加上三个可<strong>拖拽</strong>的手柄让你轻松完成数据区域浏览，你甚至可以启用更加直观的<strong>框选</strong><img src="./img/iconDataZoom.png" class="echarts-icon"/>放大和<strong>后退</strong><img src="./img/iconDataZoomReset.png" class="echarts-icon"/>！
                            <br/><strong>拖拽</strong>和<strong>框选</strong>这两种交互会自动同步的！你或许已经发现了，随动的还有<strong>极值点</strong>和<strong>平均线</strong>的自动标注。<br/>
                        </small>
                    </p>
                    <div class="main" optionKey="dataZoom1"></div>
                </section>
                
                <section>
                    <h4>[ 多图联动 ] 更友好的关联数据分析</h4>
                    <p>
                        <small>多系列数据在同一个直角系内同时展现有时候会产生混乱，但他们又存在极强的关联意义不可分离？</small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了多图联动的能力（connect），能做的可不仅仅是鼠标划过的详情显示。</small>
                    </p>
                    <div class="main" optionKey="multiCharts" style='height:210px;padding-bottom:0;border-bottom-width:0'></div>
                    <div id="mcMain2" class="main2" style='height:140px;padding:1px 10px;border-width:0 1px;'></div>
                    <div id="mcMain3" class="main2" style='height:100px;padding-top:1px;border-top-width:0'></div>
                </section>
                
                <section>
                    <section>
                        <h4>[ 百搭时间轴 ] 时间维度的拓展 </h4>
                        <p>
                            <small>时空数据分析是信息可视化里一个相当重要的方向！</small>
                        </p>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供可与任意图表搭配使用的时间轴控件以展现时空数据变化。
                            </small>
                        </p>
                        <div class="main" optionKey="timeline1"></div>
                    </section>
                    <section>
                        <h4>[ 百搭时间轴 ] 时间维度的拓展 </h4>
                        <p>
                            <small>时空数据分析是信息可视化里一个相当重要的方向！</small>
                        </p>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供可与任意图表搭配使用的时间轴控件以展现时空数据变化。
                            </small>
                        </p>
                        <div class="main" optionKey="timeline2"></div>
                    </section>
                </section>
                
                <section>
                    <h4>[ 大规模散点 ] 展现大数据的魅力</h4>
                    <p>
                        <small>如何展现成千上百的离散数据从而找出他们的分布和聚类？<br/>
                            <span class="fragment">哦，不对，是成千上百<strong>万</strong>数据！貌似除了用专业的统计工具（如MATLAB）外别无选择！
                            </span>
                        </small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们发明了基于像素的大规模散点图，就像用如下的散点区域就能够毫不重复的呈现36万组数据，这对于常规的应用，用现代浏览器就足以轻松展现<strong>百万级</strong>的散点数据！
                            <br/>当然，你会理所当然的启用<strong>框选</strong><img src="./img/iconDataZoom.png" class="echarts-icon"/>进行数据区域缩放，是否发现了更神奇的事情？<br/>
                        </small>
                    </p>
                    <div class="main" optionKey="scatter"></div>
                </section>

                <section>
                    <section>
                        <h4>[ 力导向布局 ] 复杂关系网络的最美呈现</h4>
                        <p>
                            <small>系统中的每个节点都可以看成是一个带有一定能量的放电粒子，粒子间存在某种库仑斥力。同时，有些粒子间被一些“边”所牵连，这些边产生类似弹簧的胡克引力。在粒子间斥力和引力的不断作用下，粒子们从随机无序的初态不断发生位移，逐渐趋于平衡有序的终态。同时整个物理系统的能量也在不断消耗，经过数次迭代后，粒子间几乎不再发生相对位移，整个系统达到一种稳定平衡的状态。这就是<strong>力导向布局算法</strong>的直白描述，作为最美观的呈现复杂关系网络的图表你需要吗？</small>
                        </p>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了力导向布局图，比如呈现一个简单的人物关系网络：<strong>乔布斯</strong>！</small>
                        </p>
                        <div class="main" optionKey="force1"></div>
                    </section>
                    <section>
                        <h4>[ 力导向布局 ] 复杂关系网络的最美呈现</h4>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，或者你可以切换查看一个更复杂的如：<strong>Webkit内核的类依赖关系</strong>！</small>
                        </p>
                        <div class="main" optionKey="force2" style="height:500px"></div>
                    </section>
                </section>

                <section>
                    <h4>[ 动态数据添加 ] 实时展现数据变化</h4>
                    <p>
                        <small>在数据每时每刻都在产生的今天，需要一种手段为你或为你的客户呈现那些能够反应当前状态或洞悉未来趋势的数据!<br/></small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了动态数据接口以方便你更快更形象地实现这一诉求！<br/></small>
                    </p>
                    <div class="main" optionKey="dynamic"></div>
                </section>
                
                <section>
                    <h4>[ 多维度图例开关 ] 切换你所关心的数据系列</h4>
                    <p>
                        <small>多系列数据的同时展现呈现出丰富内容，但如何让用户切换到他所关心的个别系列上？
                            <br/>是的，用心的程序员都为此写了一排复选框去配合他们所使用的那笨拙的图表库去实现这项功能！
                        </small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们当然愿意代劳，因为集成到图表上的直观交互才是最佳的用户体验，而且我们的图例开关是多维度的，<strong>点击</strong>那些图例，他的含义同样简单的无需解析！<br/></small>
                    </p>
                    <div class="main" optionKey="legendSelected"></div>
                </section>

                <section>
                    <h4>[ 多维度堆积 ] 展现更具内涵的统计图表</h4>
                    <p>
                        <small>有些时候多系列数据的堆积呈现比单一汇总更具表现力：
                            <br/>是的，不用抱怨，我们知道大多数的图表都没有堆积功能或仅支持单一堆积的！
                        </small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，支持多系列，多维度的数据堆积，配合个性化配置的图形实体和自动伸缩直角坐标系，能呈现出更有内涵的统计图表！<br/></small>
                    </p>
                    <div class="main" optionKey="stack"></div>
                </section>
                
                <section>
                    <h4>[ 商业BI ] 一些应用广泛的商务图表</h4>
                    <p>
                        <small>仪表盘最常见的用途是显示关键性能指标以辅助于绩效管理。而漏斗图则在营销分析中广泛使用。</small>
                    </p>
                    <p class="fragment">
                        <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了可高度个性化的的<strong>仪表盘</strong>和<strong>漏斗图</strong>图表！<br/></small>
                    </p>
                    <div class="main" optionKey="gf"></div>
                </section>

                <section>
                    <section>
                        <h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
                        <p>
                            <small>有些时候混搭的图表会更具表现力也更有有趣味！
                                <br/>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表（共11类17种）支持任意混搭！
                            </small>
                        </p>
                        <img src="../asset/img/doc/charts.jpg" style="width:100%;max-width:100%;margin:0;">
                    </section>
    
                    <section>
                        <h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，先看个简单又常见的线柱饼混搭例子：<br/></small>
                        </p>
                        <div class="main" optionKey="mix1"></div>
                    </section>
    
                    <section>
                        <h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，再看一个稍微复杂点的混搭例子：<br/></small>
                        </p>
                        <div class="main" optionKey="mix2"></div>
                    </section>
    
                    <section>
                        <h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭。
                                <br/>配合事件响应你甚至可以在图表内就做出一个具有数据联动的交互系统！
                                <br/>试试<strong>点击</strong>选择一些省份？当然你可以把地图改为单选模式去呈现该省更多详细的数据！
                            </small>
                        </p>
                        <div class="main" optionKey="mix3"></div>
                    </section>
    
                    <section>
                        <h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
                        <p>
                            <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表支持任意混搭，或许你还可以发挥一下奇思妙想？
                                <br/>就像一般来说饼图（雷达图）并不适合呈现数据的变化趋势，如果用很多的饼图（雷达图）呢？
                                <br/>混搭出的这种多层嵌套图表我们给他起了个亲切的名字“<a onclick="functionMap['lasagna']()" style="cursor:pointer">千层饼</a>”或者“<a onclick="functionMap['wormhole']()" style="cursor:pointer">虫洞</a>”！<br/>
                            </small>
                        </p>
                        <div class="main" optionKey="lasagna"></div>
                    </section>
                </section>

                <section>
                    <h4>[ 高度个性化能力 ] 释放你的创造力</h4>
                    <p>
                        <small>别因为图表的能力局限了你的创作力，<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>拥有超过<strong>600</strong>项的配置选项，配合<strong>多级控制</strong>让它具备了高度个性化能力，开源后大量的应用反馈让研发团队吃惊，很多从未想过的图表样式被被创作出来了。 </small>
                    </p>
                    <img src="../asset/img/creativity.jpg" style="width:100%;max-width:100%;margin:0;">
                </section>

                <section>
                    <section>
                        <h4>[ 特效 ] 吸引眼球的能力</h4>
                        <p>
                            <small>我们知道，很多时候我们需要一些吸引眼球的能力。
                                <br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<strong>炫光特效</strong>，特别用在地图上轻松实现百度迁徙数据可视化特效：<strong>模拟迁徙</strong>
                                <br/>而当你有大量标注数据，你可以尝试我们的大规模炫光<strong>MarkPoint</strong>
                            </small>
                        </p>
                        <div class="main" style="height:500px;background-color:transparent" optionKey="effect1"></div>
                    </section>
                    <section>
                        <h4>[ 特效 ] 吸引眼球的能力</h4>
                        <p>
                            <small>我们知道，很多时候我们需要一些吸引眼球的能力。
                                <br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<strong>炫光特效</strong>，特别用在地图上轻松实现百度迁徙数据可视化特效：<strong>模拟迁徙</strong>
                                <br/>而当你有大量标注数据，你可以尝试我们的大规模炫光<strong>MarkPoint</strong>
                            </small>
                        </p>
                        <div class="main" style="height:500px;background-color:transparent" optionKey="effect2"></div>
                    </section>
                    <section>
                        <h4>[ 特效 ] 吸引眼球的能力</h4>
                        <p>
                            <small>我们知道，很多时候我们需要一些吸引眼球的能力。
                                <br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<strong>炫光特效</strong>，特别用在地图上轻松实现百度迁徙数据可视化特效：<strong>模拟迁徙</strong>
                                <br/>而当你有大量标注数据，你可以尝试我们的大规模炫光<strong>MarkPoint</strong>
                            </small>
                        </p>
                        <div class="main" style="height:500px;background-color:transparent" optionKey="effect3"></div>
                    </section>
                </section>
                
                <section>
                    <section>
                        <h4>应用 - Baidu</h4>
                        <div>
                            <img src="./img/usage1.png" width="100%"/>
                        </div>
                    </section>
                    <section>
                        <h4>应用 - Others</h4>
                        <div>
                            <img src="./img/usage2.png" width="100%"/>
                        </div>
                    </section>
                </section>
                
                <section>
                    <h4>ECharts VS Excel</h4>
                    <p>
                        <small>虽说Excel输出的图表毫无交互性可言，但其丰富的图表类型和配置项，简单易用，无疑是最常用的制作数据统计的工具。那看看ECharts和Excel都支持哪些图表类型？</small>
                    </p>    
                    <table class="fragment table table-striped table-bordered table-hover">
                        <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>
                </section>

                <section>
                    <section>
                        <h4>ECharts VS Highcharts (1)</h4>
                        <p>
                            <small>业界有无数js图表库，不乏优秀的代表，如chartjs，FusionCharts，amCharts，flot，RGraph，jqPlot，gRaphaël等等。有的是免费甚至开源的，有的则是商业的，百度一下就能找到他们。</small>
                        </p>
                        <p class="fragment">
                            <small>无法跟他们一一对比，在这选择了知名度很高的<a href="http://www.highcharts.com/" target="_blank">Highcharts</a>，一个优秀，成熟的商业图表库。
                                <br/>先看看ECharts和Highcharts都支持哪些图表类型？
                            </small>
                        </p>    
                        <table class="fragment table table-striped table-bordered table-hover">
                            <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>
                    </section>
    
                    <section>
                        <h4>ECharts VS Highcharts (2)</h4>
                        <p>
                            <small>再来看看ECharts和Highcharts都有哪些特性？</small>
                        </p>    
                        <table class="table table-striped table-bordered table-hover">
                            <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><br/>License &amp; Pricing</td>
                                    <td class='success'>Free<br/><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Baidu BSD</a></td>
                                    <td class='success'>Non-commercial free under CC3.0<br/><br/>Commercial licenses $90~$3600</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                </section>

                <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>
                    <div class="fragment">
                        <hr/>
                        <p>
                            <small><strong>重新定义数据图表的时候到了</strong>，浏览ECharts所输出的图表，你不再只是个“读者”，你可以参与其中，这就是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们正在打造的一个拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化工具。</small>
                    </p>
                    </div>
                </section>

                <section>
                    <h4>致谢</h4>
                    <p><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>
                        <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>
                        <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>
                    <h1>THE END</h1>
                    <h5>Thank you</h5>
                    <br/>
                    <div>
                        <small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
                    </div>
                </section>

            </div>

        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.min.js"></script>

        <script>
            // Full list of configuration options available here:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,
                height: '100%',

                theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
                transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

                // Optional libraries used to extend on reveal.js
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    //{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
                    { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                    // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
                    // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
                ]
            });

        </script>
        <script src="../example/www/js/echarts.js"></script>
        <script src="js/whyEcharts.js"></script>
        <script src="js/timelineOption.js"></script>
    </body>
</html>