share/20160906/lecture.html (323 lines of code) (raw):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js</title>
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/css/reveal.css">
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/css/theme/black.css" id="theme">
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/css/theme/black-md2reveal.css" id="themeMine">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<div class="slides"><section data-markdown><script type="text/template">
# 图表制作的一些信息
## &
# ECharts DIY
(by: echarts 团队)
</script></section><section data-markdown><script type="text/template">
> 本文档 URL
<http://echarts.baidu.com/share/20160906/lecture.html>
> 纲要
+ ECharts 概述
+ 图表制作工具
+ 效果示例
+ 基础知识
+ 动手制作
+ 练习和 QA
</script></section><section ><section data-markdown><script type="text/template">
# ECharts 概述
</script></section><section data-markdown><script type="text/template">
官网 和 示例：
> + <http://echarts.baidu.com>
> + <http://gallery.echartsjs.com>
随意两个例子：
> + <http://gallery.echartsjs.com/editor.html?c=heatmap-cartesian>
> + <http://gallery.echartsjs.com/editor.html?c=xSyGj62SO>
</script></section></section><section ><section data-markdown><script type="text/template">
# 图表制作【工具】
</script></section><section data-markdown><script type="text/template">
### 【工具】：（不严格不全面的）工具分类
| 类别 | 举例 |
|:--------------------------------------: | :--------------------------------:|
| Office application | PPT / Excel / Pages / Numbers |
| Graphics editor | PhotoShop / Adobe Illustrator |
| BI software or service | Power BI / Tableau / BDP |
| Infographic / chart web editor | plot.ly / infogr.am / 图说 / ec-gallery |
| Statistical computing software | SPSS / MATLAB / R (ggplot) |
| Web lib / pacakage | d3 / echarts / Map service API |
</script></section><section data-markdown><script type="text/template">
### 【工具】：Office application
+ 举例：PPT / Pages / Excel / Numbers
+ 软件形式：Native App
+ 使用方式：Edit
+ 发布方式：图片 / 通用格式的文档（.ppt / .xls / ...）
+ 优点：数据处理能力**强**。使用方式广为人知。
+ 缺点：**不易于**分享（web 发布，垮平台）。图表动态能力和交互能力**差**。
</script></section><section data-markdown><script type="text/template">
### 【工具】：Graphics editor
+ 举例：PhotoShop / Adobe Illustrator
+ 软件形式：Native App
+ 使用方式：Edit
+ 发布方式：图片
+ 优点：视觉自定义能力**强**。使用方式广为人知。
+ 缺点：图表的用户交互能力**弱**。
</script></section><section data-markdown><script type="text/template">
### 【工具】：BI software or service
+ 举例：Power BI / Tableau / BDP
+ 软件形式：Native App / Web App
+ 使用方式：Edit
+ 发布方式：web asset / 图片
+ 优点：数据分析能力**强**。**易于**使用动态数据。
+ 缺点：图表（或视觉）自定义能力**弱**。需要一定学习成本。
+ 其他：有些易于 web 发布，有些不易于。
</script></section><section data-markdown><script type="text/template">
### 【工具】：Infographic / chart / plot web editor
+ 举例：plot.ly / infogr.am / 图说 / ec-gallery
+ 软件形式：Web App
+ 使用方式：Edit / Programming
+ 发布方式：web asset / 图片
+ 优点：图表（或视觉）自定义能力**强**。**易于**分享（web 发布）。图表的用户交互能力**强**。
+ 缺点：国外的很多在墙内不易访问，或者很慢。不少要收费。
+ 其他：数据分析能力一般或弱。多数简单易上手。少数需要一些学习成本。
</script></section><section data-markdown><script type="text/template">
### 【工具】：参考资源
Infographic / chart editor / BI
国内的：
> + <http://gallery.echartsjs.com>
> + <http://tushuo.baidu.com>
> + <http://h5.baidu.com/>
> + <https://www.bdp.cn>
> + <http://wentu.io/>
> + <http://www.eqxiu.com/>
> + <http://xiumi.us/#/>
</script></section><section data-markdown><script type="text/template">
### 【工具】：参考资源
Infographic / chart web editor / BI
国外的：
> + <https://plot.ly/javascript/> <https://plot.ly/alpha/workspace/>
> + <https://infogr.am>
> + <http://datamatic.co/>
> + <https://www.silk.co/product>
> + <http://piktochart.com/>
> + <https://datahero.com>
> + <http://chartio.com/>
> + <http://www.birst.com/>
</script></section><section data-markdown><script type="text/template">
### 【工具】：Statistical computing software
+ 举例：SPSS / MATLAB / R (ggplot)
+ 软件形式：Native App
+ 使用方式：Programming
+ 发布方式：图片
+ 优点：数据分析能力**极强**。
+ 缺点：学习成本**高**（编程）。
</script></section><section data-markdown><script type="text/template">
### 【工具】：Web lib / pacakage / API
+ 举例：d3 / echarts / Map service API
+ 软件形式：Web Library
+ 使用方式：Programming
+ 发布方式：Web asset / 图片
+ 优点：图表（或视觉）自定义能力**极强**、图表的用户交互能力**极强**、**易于** web 发布（但需要有自己的基础设施（网站等））。
+ 缺点：学习成本**高**（编程）。需要有自己的基础设施（网站等）。
</script></section><section data-markdown><script type="text/template">
### 【工具】：参考资源
Chart libraries (for web):
> + <http://echarts.baidu.com>
> + <https://d3js.org/>
一些国内地图服务 / API
> + <http://lbsyun.baidu.com/>
> + <http://lbs.amap.com/>
> + <http://www.dituhui.com/>
</script></section><section data-markdown><script type="text/template">
### 【工具】：参考资源
一些世界地图服务 / API / lib / datasource
> + <http://leafletjs.com/>
> + <https://developers.google.com/maps>
> + <http://geojson.io/>
> + <https://carto.com/>
> + <https://www.mapbox.com/>
> + <https://www.openstreetmap.org/>
> + <https://www.nasa.gov/>
> + <http://geohey.com>
> + <http://giscollective.org/>
> + <http://nanocubes.net/>
> + <http://www.naturalearthdata.com/>
> + <http://www.gadm.org/>
> + <https://github.com/wandergis/coordtransform>
</script></section><section data-markdown><script type="text/template">
### 总结
+ 视觉效果以及图表的定制能力：Graphic editor, Web lib
+ 用户交互能力：Web lib
+ web发布分享能力：Chart web editor, BI, Web lib
+ 数据分析能力：BI
+ 易用性和学习成本：Chart web editor
> Chart web editor + Web lib
</script></section></section><section ><section data-markdown><script type="text/template">
# ECharts 例子
<div class="fragment" data-fragment-index="0"><a target="_blank" href="http://gallery.echartsjs.com">gallery.echartsjs.com</a></div>
</script></section><section data-markdown><script type="text/template">
> + <div class="fragment" data-fragment-index="1"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=area-rainfall&v=1">line</a></div>
> + <div class="fragment" data-fragment-index="2"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=xHyg33VCl&v=1">bar</a></div>
> + <div class="fragment" data-fragment-index="3"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=pie-pattern&v=1">pie</a></div>
> + <div class="fragment" data-fragment-index="4"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=scatter-painter-choice&v=1">scatter (cartesian)</a></div>
> + <div class="fragment" data-fragment-index="5"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=effectScatter-map&v=1">scatter (geo)</a></div>
> + <div class="fragment" data-fragment-index="6"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=heatmap-cartesian&v=1">heatmap (cartesian)</a></div>
> + <div class="fragment" data-fragment-index="7"><a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=heatmap-map">heatmap (geo)</a></div>
> + <div class="fragment" data-fragment-index="8"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=graph&v=1">graph</a></div>
> + <div class="fragment" data-fragment-index="9"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=xrkfsZneG&v=6">animation</a></div>
</script></section><section data-markdown><script type="text/template">
<div class="fragment" data-fragment-index="1"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=xSyGj62SO">时间</a></div>
<div class="fragment" data-fragment-index="2"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=scatter-map-brush">框选</a></div>
<div class="fragment" data-fragment-index="3"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=map-lines-elevation">旅行</a></div>
<div class="fragment" data-fragment-index="4"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=xSJNibj-f">记录</a></div>
<div class="fragment" data-fragment-index="5"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=bmap-bus">公交</a></div>
<div class="fragment" data-fragment-index="6"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=map-parallel-prices">高维</a></div>
<div class="fragment" data-fragment-index="7"><a target="_blank" href="http://gallery.echartsjs.com/preview.html?c=xBJYz2XJz">弹琴</a></div>
</script></section><section data-markdown><script type="text/template">
<div class="fragment" data-fragment-index="0">创作 · 分享</div>
<br>
<div class="fragment" data-fragment-index="1">数据可视化中的交互</div>
</script></section><section data-markdown><script type="text/template">
#### 额外
<div class="fragment" data-fragment-index="1"><a target="_blank" href="http://echarts.baidu.com/echarts2/x/doc/example/map3d.html">map 3d (area)</a></div>
<div class="fragment" data-fragment-index="1"><a target="_blank" href="http://echarts.baidu.com/echarts2/x/doc/example/map3d_population3.html">map 3d (bar)</a></div>
<div class="fragment" data-fragment-index="1"><a target="_blank" href="http://echarts.baidu.com/echarts2/x/doc/example/map3d_flights.html">map 3d (line)</a></div>
</script></section></section><section ><section data-markdown><script type="text/template">
# 基础知识
</script></section><section data-markdown><script type="text/template">
### Web chart editor
</script></section><section data-markdown><script type="text/template">
#### JavaScript：简单的浏览器端程序语言
```javascript
function initialChart(chart) {
var option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: [12, 33, 55, 14]
}]
};
if (chart != null)
chart.setOption(option);
}
}
```
</script></section><section data-markdown><script type="text/template">
#### JSON：数据传输格式
```javascript
{
"xAxis": {
"type": "category",
"data": ["A", "B", "C", "D"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "line",
"data": [12, 33, 55, 14]
},
{
"type": "bar",
"data": [55, 21, 19, 38]
}
]
}
```
</script></section><section data-markdown><script type="text/template">
<a target="_blank" href="http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts">『五分钟上手 ECharts』</a>
</script></section></section><section ><section data-markdown><script type="text/template">
# 动手制作
</script></section><section data-markdown><script type="text/template">
### 工具和资源
> + 官网：<a target="_blank" href="http://echarts.baidu.com">echarts.baidu.com</a>
> + Gallery：<a target="_blank" href="http://gallery.echartsjs.com">gallery.echartsjs.com</a>
> + 配置项查询手册：<a target="_blank" href="http://echarts.baidu.com/option.html">echarts.baidu.com/option.html</a>
> + 教程：<a target="_blank" href="http://echarts.baidu.com/tutorial.html">echarts.baidu.com/tutorial.html</a>
> + API 手册：<a target="_blank" href="http://echarts.baidu.com/api.html">echarts.baidu.com/api.html</a>
> + 表格工具：<a target="_blank" href="http://echarts.baidu.com/spreadsheet.html">echarts.baidu.com/spreadsheet.html</a>
> + <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">JavaScript Array 方法速查手册 (1)</a>
> + <a target="_blank" href="http://www.w3school.com.cn/jsref/jsref_obj_array.asp">JavaScript Array 方法速查手册 (2)</a>
</script></section><section data-markdown><script type="text/template">
### 示例一
热身
> + <div class="fragment" data-fragment-index="1"><a target="_blank" href="resource/gdp_world.xls">一份各国 GDP 数据（点击下载，excel 打开）</a></div>
> + <div class="fragment" data-fragment-index="2">根据<a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=treemap-drill-down">这个例子</a>修改</div>
> + <div class="fragment" data-fragment-index="3">查查文档中<a target="_blank" href="http://echarts.baidu.com/option.html#series-treemap.data"> treemap 数据格式</a></div>
> + <div class="fragment" data-fragment-index="4">使用<a target="_blank" href="http://echarts.baidu.com/spreadsheet.html">表格工具处理</a></div>
> + <div class="fragment" data-fragment-index="5"><a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=xHJvImelK">结果样例</a></div>
<div class="fragment" data-fragment-index="6">再尝试</div>
> + <div class="fragment" data-fragment-index="7">由<a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=xS1f7Hkwf">这个地图例子</a>改</div>
> + <div class="fragment" data-fragment-index="8">查查文档中<a target="_blank" href="http://echarts.baidu.com/option.html#series-map.data"> map 数据格式</a></div>
</script></section><section data-markdown><script type="text/template">
### 示例二：
> + <div class="fragment" data-fragment-index="1"><a target="_blank" href="resource/patent_by_year.xls">一份各年专利申请量数据（点击下载，excel 打开）</a></div>
> + <div class="fragment" data-fragment-index="2">根据<a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=xrkfsZneG">这个例子</a>修改</div>
> + <div class="fragment" data-fragment-index="3"><a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=xByFRtxeK">结果样例</a></div>
</script></section><section data-markdown><script type="text/template">
### 示例三：
> + <div class="fragment" data-fragment-index="1"><a target="_blank" href="resource/patent_world.xls">一份各国家专利申请量数据（点击下载，excel 打开）</a></div>
> + <div class="fragment" data-fragment-index="2">根据<a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=xSyGj62SO">这个例子</a>修改</div>
> + <div class="fragment" data-fragment-index="3">查查文档中<a target="_blank" href="http://echarts.baidu.com/option.html#series-scatter.data"> scatter 数据格式</a></div>
> + <div class="fragment" data-fragment-index="4"><a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=xr16-Eukt">结果样例</a></div>
</script></section><section data-markdown><script type="text/template">
#### 练习 A：
> 做出上述三个示例。
#### 练习 B：
> 下面给出了一份数据，尝试做出一个图。
> + <a target="_blank" href="http://echarts.baidu.com/meeting/wuda/handon/medal.xlsx">各国历史金牌数据</a>
> + <a target="_blank" href="http://gallery.echartsjs.com/editor.html?c=xByDhpFIu">一个例子</a>
</script></section></section><section data-markdown><script type="text/template">
### THE END
</script></section></div>
</div>
<script src="./asset/md2reveal-0.1.7/lib/js/head.min.js"></script>
<script src="./asset/md2reveal-0.1.7/js/reveal.js"></script>
<script src="./asset/md2reveal-0.1.7/js/md2reveal.js"></script>
<script>
function extend() {
var target = {};
for (var i = 0; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
return target;
}
// Optional libraries used to extend on reveal.js
var deps = [
{ src: './asset/md2reveal-0.1.7/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: './asset/md2reveal-0.1.7/plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: './asset/md2reveal-0.1.7/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: './asset/md2reveal-0.1.7/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: './asset/md2reveal-0.1.7/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: './asset/md2reveal-0.1.7/plugin/math/math.js', async: true }
];
// default options to init reveal.js
var defaultOptions = {
controls: true,
progress: true,
history: true,
center: true,
transition: 'default',
dependencies: deps
};
// options from URL query string
var queryOptions = Reveal.getQueryHash() || {};
var options = {};
options = extend(defaultOptions, options, queryOptions);
Reveal.initialize(options);
</script>
</body>
</html>