269 lines
14 KiB
HTML
269 lines
14 KiB
HTML
<!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/>&<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> |