675 lines
39 KiB
HTML
675 lines
39 KiB
HTML
|
<!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>It's time to redefine the chart!</h5><br/>
|
|||
|
|
<div>
|
|||
|
|
<small>Open source from Baidu SSG Data Visualization Team</small><br/>
|
|||
|
|
<small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>Innumerable charts library!</h4>
|
|||
|
|
<div class="fragment" style="text-align:right;">
|
|||
|
|
<hr/>Why <strong style="color:#9acd32">ECharts</strong> ?
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4 style="color:#9acd32">Data Interactive Visualization</h4>
|
|||
|
|
<p><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/>
|
|||
|
|
<div class="fragment" style="text-align:right;">
|
|||
|
|
<hr>
|
|||
|
|
<small>Let's find out what <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has done for this purpose?<br/>
|
|||
|
|
<small>* The following content is recommended full-screen (F11)</small>
|
|||
|
|
</small>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Drag-Recalculate ] Data reorganized</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>The default classification of chart can't always meet the needs of everyone.
|
|||
|
|
<br/>Look at the following example: if you want to know the combined proportion that IE 6, IE 7, and IE 8 represent, what will you do? Mental arithmetic or take out a pen?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, try to <strong>drag</strong> the desired items on top of each other to combine them!</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="calculable1"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Drag-Recalculate ] Deal with outliers</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>There are often outliers in our data. Look at the following sales data in Chinese Single Day (11-11). Except the sales peak on Single Day, can you find something else?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, try to <strong>drag</strong> the outlier out!
|
|||
|
|
<br/>Wow, after dragging that out, can you find some trend which is not optimistic?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="calculable2"></div>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Data View ] Sometimes we need the original data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>If the data presented is important to the users, then they will not satisfied to see a visual chart.</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, Try to <strong>click</strong><img src="./img/iconDataView.png" class="echarts-icon"/>!
|
|||
|
|
<br/>You can even <strong>edit</strong> your data and update the chart! Compared with Drag-Recalculate, this is batch operation!
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="dataView"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Magic Switch ] Try different charts at once</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>We can use different charts to express the same data. However it's hard to make an always-good choice since their performance depends on data, personal preference etc. For example, choose a bar chart or a line chart ?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can switch the chart magicly!
|
|||
|
|
Try to <strong>switch</strong> the bar chart<img src="./img/iconBarChart.png" class="echarts-icon"/>to the line chart<img src="./img/iconLineChart.png" class="echarts-icon"/>, or from stack to tiled<img src="./img/iconStack.png" class="echarts-icon"/>, maybe you will have more interpretation of this data.</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="magicType"></div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Magic Switch ] Try different charts at once</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>We can use different charts to express the same data. However it's hard to make an always-good choice since their performance depends on data, personal preference etc. For example, choose a bar chart or a line chart ?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can switch the chart magicly! Maybe you will have more interpretation of this data.</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="magicType2"></div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Magic Switch ] Try different charts at once</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>We can use different charts to express the same data. However it's hard to make an always-good choice since their performance depends on data, personal preference etc. For example, choose a bar chart or a line chart ?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can switch the chart magicly! Maybe you will have more interpretation of this data.</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="legendSelected"></div>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Scale Roaming ] Focus on the interested data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>We can use different colors in Coordinate based charts (like map or scatter) to show the distribution of the data vividly.
|
|||
|
|
<br/>But how can I focus on the data that I am interesting in? For example, how to look over the top 10% area? Find pen again?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, You can do scale roaming: try to <strong>drag</strong> the color scale up or down.
|
|||
|
|
<br/>The mean of this doesn't need more explanation.<br/>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="dataRange1"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Space Zoom ] Focus on the interested data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Display space is always limited, so we need Space Zoom, you can zoom the space easily.</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can use the <strong>drag chooser</strong> at the bottom or the <strong>block chooser</strong><img src="./img/iconDataZoom.png" class="echarts-icon"/> to zoom in or <strong>back</strong><img src="./img/iconDataZoomReset.png" class="echarts-icon"/>! Of course, they are always in lockstep.
|
|||
|
|
<br/>Maybe you have found the <strong>Extreme MarkPoint</strong> and the <strong>Average MarkLine</strong> are also in lockstep.<br/>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="dataZoom1"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Linkage ] More powerful tool for data correlation analysis </h4>
|
|||
|
|
<p>
|
|||
|
|
<small>
|
|||
|
|
Sometimes, multi-series data in one chart would be confusing. However, they are associated and can't be separated?
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide a capability called "Linkage".</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>[ Mixed Timeline ] Expand the dimension of time </h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Time data analysis is a very important direction in information visualization!</small>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide a timeline control which can be mixed with any charts to show the spatio-temporal data changes.
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="timeline1"></div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Mixed Timeline ] Expand the dimension of time </h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Time data analysis is a very important direction in information visualization!</small>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide a timeline control which can be mixed with any charts to show the spatio-temporal data changes.
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="timeline2"></div>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Large-scale ] Show the charm of big data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>How to show hundreds of discrete data in order to identify their distribution and clustering?<br/>
|
|||
|
|
<span class="fragment">Oh, sorry should be <strong>hundred thousand, event million</strong> data! In addition to professional statistical tools(Such as MATLAB), it seems we have no choice, especially on the web!
|
|||
|
|
</span>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we can show 200,000 data in one second.
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="scatter"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Force-directed layout ] Elegant display of networks</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide Force-directed layout to show network data.
|
|||
|
|
<br/>For example, social networks of <strong>Job</strong>!</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="force1"></div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Force-directed layout ] Elegant display of networks</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide Force-directed layout to show network data.
|
|||
|
|
<br/>Let's check a more complicated example: <strong>class depends relationship of Webkit Kernel</strong>!</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="force2" style="height:500px"></div>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Dynamically Addition ] Show your realtime data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>New data comes every second, we should keep up with the rhythm.<br/></small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide dynamic data interface to add new data!<br/></small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="dynamic"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Legend Switch ] Switch to the interested data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Multi-series data show us many things, however somtimes we are just interested in some part of them. how to do ?</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we create some boxes to achieve this feature.
|
|||
|
|
<br/>Just <strong>click</strong> on those legends, the meaning need no explanation !</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="legendSelected"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Multi-dimensional Stacking ] More expressive chart</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Sometimes the multi-dimensional stacking chart shows more expressively than a single stacking chart. However, we know that most of the charts don't support it.
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, supported!<br/></small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="stack"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ BI Component ] Some widely used business chart</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>The most common use of gauge chart is to display the key indicators for performance management.
|
|||
|
|
And the funnel plot is widely used in marketing analysis.</small>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide two highly customizable chart for this: <strong>Gauge</strong> and <strong>Funnel</strong>!<br/></small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="gf"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Sometimes the mixed charts will be more expressive and more interesting!
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided(11 types) can be mixed freely.<br/></small>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<img src="../asset/img/doc/charts.jpg" style="width:100%;max-width:100%;margin:0;">
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.<br/></small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="mix1"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.<br/></small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="mix2"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.
|
|||
|
|
<br/>With the event handler you can event create an interactive system!
|
|||
|
|
<br/>try <strong>click</strong> the map and you will find more fun.
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="mix3"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Mixed Charts ] Show the best mashup to your data</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.
|
|||
|
|
<br/>Perhaps you can also play a bit of whimsy? Generally speaking, pie(radar) chart is not suitable for showing trends in data, how about lots of pie(radar)?
|
|||
|
|
<br/>We call this multilayer nested as "<a onclick="functionMap['lasagna']()" style="cursor:pointer">lasagna</a>" or "<a onclick="functionMap['wormhole']()" style="cursor:pointer">wormhole</a>"!<br/>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" optionKey="lasagna"></div>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Highly Customizable Capabilities] Creativity</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Do not limit your creativity because of the chart ability. <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has more than <strong>600</strong> configured items, with a <strong>multi-level control</strong> system which make it has a highly customizable capabilities.</small>
|
|||
|
|
</p>
|
|||
|
|
<img src="../asset/img/creativity.jpg" style="width:100%;max-width:100%;margin:0;">
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Glare Effect ] Ability to attract the eye</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>We know that many times we need to be cool.
|
|||
|
|
<br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has <strong>Glare Effects</strong>，especially use it on the map: <strong>Migration</strong>
|
|||
|
|
<br/>And when you have a lots of data, you can try our <strong>Large-scale Glare MarkPoint Effects</strong>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" style="height:500px;background-color:transparent" optionKey="effect1"></div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Glare Effect ] Ability to attract the eye</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>We know that many times we need to be cool.
|
|||
|
|
<br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has <strong>Glare Effects</strong>，especially use it on the map: <strong>Migration</strong>
|
|||
|
|
<br/>And when you have a lots of data, you can try our <strong>Large-scale Glare MarkPoint Effects</strong>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" style="height:500px;background-color:transparent" optionKey="effect2"></div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h4>[ Glare Effect ] Ability to attract the eye</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>We know that many times we need to be cool.
|
|||
|
|
<br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has <strong>Glare Effects</strong>，especially use it on the map: <strong>Migration</strong>
|
|||
|
|
<br/>And when you have a lots of data, you can try our <strong>Large-scale Glare MarkPoint Effects</strong>
|
|||
|
|
</small>
|
|||
|
|
</p>
|
|||
|
|
<div class="main" style="height:500px;background-color:transparent" optionKey="effect3"></div>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h4>Application - Baidu</h4>
|
|||
|
|
<div>
|
|||
|
|
<img src="./img/usage1.png" width="100%"/>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<h4>Application - Others</h4>
|
|||
|
|
<div>
|
|||
|
|
<img src="./img/usage2.png" width="100%"/>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>ECharts VS Excel</h4>
|
|||
|
|
<p>
|
|||
|
|
<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>
|
|||
|
|
<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>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>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h4>ECharts VS Highcharts (1)</h4>
|
|||
|
|
<p>
|
|||
|
|
<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>
|
|||
|
|
</p>
|
|||
|
|
<p class="fragment">
|
|||
|
|
<small>Unable to compare with them all, let's choose <a href="http://www.highcharts.com/" target="_blank">Highcharts</a>, an excellent, mature business chart library which is widely known in the world.
|
|||
|
|
<br/>First about the <strong>charts type</strong>?
|
|||
|
|
</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>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>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h4>ECharts VS Highcharts (2)</h4>
|
|||
|
|
<p>
|
|||
|
|
<small>Let's look at the <strong>features</strong>?</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>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><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>
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
<h4>Acknowledgement</h4>
|
|||
|
|
<p><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>
|
|||
|
|
<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>
|
|||
|
|
<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>
|
|||
|
|
<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-en.js"></script>
|
|||
|
|
<script src="js/timelineOption.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|