<!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

![](img/architecture.png)
</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>