图表制作的一些信息

&

ECharts DIY

(by: echarts 团队)


本文档 URL

http://echarts.baidu.com/share/20160906/lecture.html

纲要

  • ECharts 概述
  • 图表制作工具
  • 效果示例
  • 基础知识
  • 动手制作
  • 练习和 QA

ECharts 概述


官网 和 示例:

随意两个例子:


图表制作【工具】


【工具】:(不严格不全面的)工具分类

类别举例
Office applicationPPT / Excel / Pages / Numbers
Graphics editorPhotoShop / Adobe Illustrator
BI software or servicePower BI / Tableau / BDP
Infographic / chart web editorplot.ly / infogr.am / 图说 / ec-gallery
Statistical computing softwareSPSS / MATLAB / R (ggplot)
Web lib / pacakaged3 / 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


总结

  • 视觉效果以及图表的定制能力: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:

下面给出了一份数据,尝试做出一个图。

  • 各国历史金牌数据
  • 一个例子

THE END