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