图表制作的一些信息
&
ECharts DIY
(by: echarts 团队)
本文档 URL
http://echarts.baidu.com/share/20160906/lecture.html
纲要
- ECharts 概述
- 图表制作工具
- 效果示例
- 基础知识
- 动手制作
- 练习和 QA
ECharts 概述
官网 和 示例：
随意两个例子：
图表制作【工具】
【工具】：（不严格不全面的）工具分类
| 类别 | 举例 |
|---|---|
| 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 |
【工具】：Office application
举例：PPT / Pages / Excel / Numbers
软件形式：Native App
使用方式：Edit
发布方式：图片 / 通用格式的文档（.ppt / .xls / ...）
优点：数据处理能力强。使用方式广为人知。
缺点：不易于分享（web 发布，垮平台）。图表动态能力和交互能力差。
【工具】：Graphics editor
举例：PhotoShop / Adobe Illustrator
软件形式：Native App
使用方式：Edit
发布方式：图片
优点：视觉自定义能力强。使用方式广为人知。
缺点：图表的用户交互能力弱。
【工具】：BI software or service
举例：Power BI / Tableau / BDP
软件形式：Native App / Web App
使用方式：Edit
发布方式：web asset / 图片
优点：数据分析能力强。易于使用动态数据。
缺点：图表（或视觉）自定义能力弱。需要一定学习成本。
其他：有些易于 web 发布，有些不易于。
【工具】：Infographic / chart / plot web editor
举例：plot.ly / infogr.am / 图说 / ec-gallery
软件形式：Web App
使用方式：Edit / Programming
发布方式：web asset / 图片
优点：图表（或视觉）自定义能力强。易于分享（web 发布）。图表的用户交互能力强。
缺点：国外的很多在墙内不易访问，或者很慢。不少要收费。
其他：数据分析能力一般或弱。多数简单易上手。少数需要一些学习成本。
【工具】：参考资源
Infographic / chart editor / BI
国内的：
【工具】：参考资源
Infographic / chart web editor / BI
国外的：
【工具】：Statistical computing software
举例：SPSS / MATLAB / R (ggplot)
软件形式：Native App
使用方式：Programming
发布方式：图片
优点：数据分析能力极强。
缺点：学习成本高（编程）。
【工具】：Web lib / pacakage / API
举例：d3 / echarts / Map service API
软件形式：Web Library
使用方式：Programming
发布方式：Web asset / 图片
优点：图表（或视觉）自定义能力极强、图表的用户交互能力极强、易于 web 发布（但需要有自己的基础设施（网站等））。
缺点：学习成本高（编程）。需要有自己的基础设施（网站等）。
【工具】：参考资源
Chart libraries (for web):
一些国内地图服务 / API
【工具】：参考资源
一些世界地图服务 / 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
总结
- 视觉效果以及图表的定制能力：Graphic editor, Web lib
- 用户交互能力：Web lib
- web发布分享能力：Chart web editor, BI, Web lib
- 数据分析能力：BI
- 易用性和学习成本：Chart web editor
Chart web editor + Web lib
ECharts 例子
{0|gallery.echartsjs.com}
- {1|line}
- {2|bar}
- {3|pie}
- {4|scatter (cartesian)}
- {5|scatter (geo)}
- {6|heatmap (cartesian)}
- {7|heatmap (geo)}
- {8|graph}
- {9|animation}
{1|时间} {2|框选} {3|旅行} {4|记录} {5|公交} {6|高维} {7|弹琴}
{0|创作 · 分享}
{1|数据可视化中的交互}
额外
{1|map 3d (area)} {1|map 3d (bar)} {1|map 3d (line)}
基础知识
Web chart editor
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); } }
JSON：数据传输格式
{ "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] } ] }
『五分钟上手 ECharts』
动手制作
工具和资源
- 官网：echarts.baidu.com
- Gallery：gallery.echartsjs.com
- 配置项查询手册：echarts.baidu.com/option.html
- 教程：echarts.baidu.com/tutorial.html
- API 手册：echarts.baidu.com/api.html
- 表格工具：echarts.baidu.com/spreadsheet.html
- JavaScript Array 方法速查手册 (1)
- JavaScript Array 方法速查手册 (2)
示例一
热身
- {1|一份各国 GDP 数据（点击下载，excel 打开）}
- {2|根据这个例子修改}
- {3|查查文档中 treemap 数据格式}
- {4|使用表格工具处理}
- {5|结果样例}
{6|再尝试}
- {7|由这个地图例子改}
- {8|查查文档中 map 数据格式}
示例二：
- {1|一份各年专利申请量数据（点击下载，excel 打开）}
- {2|根据这个例子修改}
- {3|结果样例}
示例三：
- {1|一份各国家专利申请量数据（点击下载，excel 打开）}
- {2|根据这个例子修改}
- {3|查查文档中 scatter 数据格式}
- {4|结果样例}
练习 A：
做出上述三个示例。
练习 B：
下面给出了一份数据，尝试做出一个图。
- 各国历史金牌数据
- 一个例子