| <!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]--> | |
| <script src="../asset/js/esl/esl.js"></script> | |
| <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; | |
| } | |
| 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; | |
| } | |
| </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> | |
| <small>Why</small> | |
| <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 data-background="./img/大数据时代.jpg"> | |
| <h3>《大数据时代》</h3> | |
| <small>维克托 · 迈尔 - 舍恩伯格</small> | |
| <div style="padding-left:260px;background:url(img/bigData.jpg) no-repeat"> | |
| <div class="fragment"> | |
| <blockquote><p> | |
| <small>如今，<strong>数据已经成为了一种商业资本</strong>，一项重要的经济投入，可以创造新的经济利益。事实上，一旦思维转变过来，数据就能被巧妙地用来激发新的产品和新型服务。数据的奥秘只为谦逊、愿意聆听且掌握了聆听手段的人所知。</small> | |
| </p></blockquote> | |
| <div style="text-align:right;"><small>—— 你的<strong>聆听手段</strong>是？</small></div> | |
| </div> | |
| <div class="fragment"> | |
| <blockquote><p> | |
| <small>这仅仅只是一个开始，大数据时代对我们的生活，以及与世界交流的方式提出挑战。最惊人的是，社会需要放弃它对因果关系的渴求，而仅需关注相关关系。也就是说<strong>只需要知道是什么，而不需要知道为什么</strong>。这就推翻了自古以来的惯例，而我们做决定和理解显示的最基本方式也将受到挑战。</small> | |
| </p></blockquote> | |
| <div style="text-align:right;"><small>—— 它真正呈现了<strong>数据是什么</strong>了吗？</small></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h4>你的聆听手段是？</h4> | |
| <p> | |
| <small>不久前，专业大数据可视化公司Tableau在纽交所<a href='http://news.imeigu.com/a/1369902112563.html' target='_blank'>成功上市</a>，当日收盘涨幅64%，至50.75美元，共募集资金2.542亿美元，成为今年美国最大一笔科技业IPO。Tableau Software正是一家做大数据的公司，更确切地说是大数据处理的最后一环：</small> | |
| </p> | |
| <div class="fragment roll-in"> | |
| <img src="./img/tableau.jpg" style="width:100%;max-width:100%;"/> | |
| <div class="fragment grow highlight-green">数据可视化</div> | |
| </div> | |
| </section> | |
| <section> | |
| <h4>那些优秀的数据可视化工具</h4> | |
| <p><small class="fragment"> | |
| <strong>Excel</strong> | |
| <br/>是最流行也是最常用的数据分析、数据绘图软件， | |
| <br/>输出图表几乎毫无交互性可言，作为一款电子表格工具并不适用大型数据集和进行动态图表输出。 | |
| </p></small> | |
| <p><small class="fragment"> | |
| <strong>Matlab</strong> | |
| <br/>主要面向科学计算、代表了当今国际科学计算软件的先进水平， | |
| <br/>需要较为深厚的编程基础，比较适合科学方面的可视化项目。 | |
| </p></small> | |
| <p><small class="fragment"> | |
| <strong>Spss</strong> | |
| <br/>功能强大且操作简单友好，偏重于统计分析， | |
| <br/>需要一定的数理统计基础，且输出的图表在与办公软件的兼容性及交互方面有所欠缺。 | |
| </p></small> | |
| <p><small class="fragment"> | |
| <strong>Tableau Desktop</strong> | |
| <br/>一款完全的数据可视化软件，专注结构化数据的快速可视化， | |
| <br/>较高的服务费用，且构建交互界面需要发布到Server。 | |
| </p></small> | |
| <div class="fragment" style="text-align:right;"><hr/>你的数据可视化工具是？这就足够了吗？</div> | |
| </section> | |
| <section> | |
| <h4>还需要什么？</h4> | |
| <blockquote class="fragment"> | |
| <small> | |
| “互联网还没搞清楚的时候，移动互联来了，移动互联还没搞清楚的时候，大数据来了” | |
| </small> | |
| <div style="height:20px;padding:0;margin:0;display:block;text-align:right;"><small><small>马云在卸任阿里集团CEO的晚会上如是说</small></small></div> | |
| </blockquote> | |
| <br/> | |
| <p class="fragment"> | |
| <small>在数据每时每刻都在产生的今天，还需要一种手段<strong>快捷</strong>的为你或为你的客户直观形象的呈现那些能够反应当前状态或洞悉未来趋势的数据。</small> | |
| </p> | |
| <p class="fragment"> | |
| <small>或许我们应该利用互联网技术快速甚至实时的获取你所关心的数据，然后提供可以<strong>辅助分析</strong>，<strong>辅助人们进行视觉化思考</strong>的数据可视化输出。</small> | |
| </p> | |
| <br/> | |
| <div class="fragment"> | |
| <hr> | |
| <p> | |
| <small>这就是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>（Enterprise Charts 商业产品图表库）！<br/>基于【HTML5】Canvas （<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>），纯Javascript图表库，提供<strong>直观，生动，可交互，可高度个性化定制</strong>的数据可视化图表。</small> | |
| </p> | |
| </div> | |
| <!--div> | |
| <div class="fragment"> | |
| <hr> | |
| <p style="background-color:rgba(255, 255, 255, 0.05);padding:5px 0 0 10px;margin:0;"><small><i> | |
| 题外话，直观，生动，可交互，<strong>为什么不是flash</strong>？ | |
| </i></small></p> | |
| </div> | |
| <p class="fragment" style="background-color:rgba(255, 255, 255, 0.05);padding:0 0 0 10px;margin:0;"><small><i> | |
| 如果你并不关心苹果的移动设备是否能看到你的呈现，那可以！乔布斯 <a href="http://tech.163.com/10/0430/09/65GR3IOD000915BD.html">Thoughts on Flash</a> | |
| </i></small></p> | |
| </div--> | |
| </section> | |
| <section> | |
| <h4>第二个问题：</h4> | |
| <br/> | |
| <h5>你的数据可视化工具真正呈现了<span class="fragment highlight-green">数据是什么</span>了吗？</h5> | |
| <br/> | |
| <small class="fragment">回答这个问题前请先看看<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>为此做了什么？<br/><br/> | |
| <small>* 下面的内容建议全屏浏览（F11切换）</small> | |
| </small> | |
| </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> | |
| <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> | |
| <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>基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布： | |
| <br/>但如何聚焦到我所关心的数值上？比如我只想查看top 10%的地域有哪些？又找笔了？ | |
| </small> | |
| </p> | |
| <p class="fragment"> | |
| <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们创造了称为值域漫游的功能，尝试<strong>上下拖拽</strong>左下角的那个控件！ | |
| <br/>他表达的意义并不需要过多的解析，看起来就像是理所当然的！<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> | |
| <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> | |
| <h4>[ 力导向布局 ] 复杂关系网络的最美呈现</h4> | |
| <p> | |
| <small>系统中的每个节点都可以看成是一个带有一定能量的放电粒子，粒子间存在某种库仑斥力。同时，有些粒子间被一些“边”所牵连，这些边产生类似弹簧的胡克引力。在粒子间斥力和引力的不断作用下，粒子们从随机无序的初态不断发生位移，逐渐趋于平衡有序的终态。同时整个物理系统的能量也在不断消耗，经过数次迭代后，粒子间几乎不再发生相对位移，整个系统达到一种稳定平衡的状态。这就是<strong>力导向布局算法</strong>的直白描述，作为最美观的呈现复杂关系网络的图表你需要吗？</small> | |
| </p> | |
| <p> | |
| <small>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供了力导向布局图，比如呈现一个简单的人物关系网络：<a onclick="functionMap['force']()" style="cursor:pointer">乔布斯</a>，或者你可以切换查看一个更复杂的如<a onclick="functionMap['force2']()" style="cursor:pointer">Webkit内核的类依赖关系</a>！<br/></small> | |
| </p> | |
| <div class="main" optionKey="force"></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="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>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4> | |
| <p> | |
| <small>有些时候混搭的图表会更具表现力也更有有趣味！ | |
| <br/>这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>，我们提供的图表（共9类14种）支持任意混搭！ | |
| </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> | |
| <h4>[ 高度个性化能力 ] 释放你的创造力</h4> | |
| <p> | |
| <small>别因为图表的能力局限了你的创作力，<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>拥有超过<strong>500</strong>项的配置选项，配合<strong>多级控制</strong>让它具备了高度个性化能力，开源后大量的应用反馈让研发团队吃惊，很多从未想过的图表样式被被创作出来了。 </small> | |
| </p> | |
| <img src="../asset/img/creativity.jpg" style="width:100%;max-width:100%;margin:0;"> | |
| </section> | |
| <section> | |
| <h4>[ 特效 ] 吸引眼球的能力</h4> | |
| <p> | |
| <small>我们知道，很多时候我们需要一些吸引眼球的能力。 | |
| <br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>支持标注标线的<a onclick="functionMap['effect']()" style="cursor:pointer">炫光特效</a>，特别用在地图上轻松实现百度迁徙数据可视化特效： | |
| <a onclick="functionMap['effect2']()" style="cursor:pointer">模拟迁徙</a> | |
| </small> | |
| </p> | |
| <div class="main" style="height:500px;background-color:transparent" optionKey="effect"></div> | |
| </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> | |
| </tbody> | |
| </table> | |
| </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='error'>No</td></tr> | |
| <tr><td>特色图表（如仪表盘）</td><td class='error'>No</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 & 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> | |
| <h4>这就是ECharts</h4> | |
| <p class="fragment"> | |
| <small>我们只是尽我们所能为你呈现数据真实的一面，</small> | |
| </p> | |
| <p class="fragment"> | |
| <small>并且提供了一些直观、易用的交互方式以方便你对所展现数据进行<span style="color:#ff4500">挖掘、提取、修正或整合</span>，<br/><strong>（拖拽重计算、数据视图）</strong></small> | |
| </p> | |
| <p class="fragment"> | |
| <small>让你可以更加<span style="color:#ff4500">专注</span>于你所关心地方，无论是系列选择、区域缩放还是数值筛选，<br/><strong>（图例开关、数据区域缩放、值域漫游）</strong></small> | |
| </p> | |
| <p class="fragment"> | |
| <small>让你可以有<span style="color:#ff4500">不同的方式解读同样的数据</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/wind108369" target="_blank">@杨骥wind108369</a> | |
| <a href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a> | |
| <a href="http://crossdo.com" target="_blank">@CrossDo</a> | |
| <a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a> | |
| </small></p><br/> | |
| <p> | |
| <small>以及他们的鼓舞助威、摇旗呐喊、推波助澜、煽风点火...<br/> | |
| <a href="http://weibo.com/forain" target="_blank">@diysimon</a> | |
| <a href="http://weibo.com/errorrik" target="_blank">@errorrik</a> | |
| <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="js/whyEcharts.js"></script> | |
| </body> | |
| </html> |