1.背景介绍
Echarts是什么
ECharts来自百度EFE数据可视化团队①,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上, 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
什么是数据可视化?
数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为, 一种以某种概要形式抽提出来的信息,包括相应信息单位的各种属性和变量。 它是一个处于不断演变之中的概念,其边界在不断地扩大。主要指的是技术上较为高级的技术方法, 而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面,通过表达、建模以及对立体、表面、 属性以及动画的显示,对数据加以可视化解释。 与立体建模之类的特殊技术方法相比,数据可视化所涵盖的技术方法要广泛得多。
数据可视化是通过处理数据来反映一些问题和规律,而不是将结果夸张化。 数据可视化已经不满足于信息的呈现,而更应该落实到有据可循的分析和决策制定中去。
人类历史上最有影响力的五个数据可视化信息图
第五名:伦敦霍乱地图 作者John Snow(“权力的游戏”剧迷请淡定)
1854年伦敦爆发霍乱,10天内有500人死去,但比死亡更加让人恐慌的是“未知”, 人们不知道霍乱的源头和感染分布。只有流行病专家John Snow意识到,源头来自市政供水。 John在地图上用黑杠标注死亡案例,最终地图“开口说话”, 显示大街水龙头是传染源。这张信息图还使公众意识到城市下水系统的重要性并采取切实行动。
第四名:世界经济变迁 作者Rosling
瑞典科学家累计研究全球经济数据超过30年,但直到2007年他再TED Talk上以可视化的方式展示这些数据, 人们才能真正领略到他的数据研究的魅力。上图是Rosling展示的大量经济数据图表中的一张, 直观展示了全球不同国家和地区个人收入与生活期望值之间的关系。
第三名:俄法战争 作者Charles Minard
1812年拿破仑率大军踏上征服莫斯科的艰苦旅程,结果遭遇极端天气,98%的士兵都冻死在路上。 50年后,当大多数法国人依然沉浸在拿破仑的荣耀中时,巴黎的工程师Charles Minard选择用数据的 方式告诉世人这场战争的残酷性。信息图中的黑色粗线显示了极端天气如何击败了拿破仑的军队, 这张图也让人们在反思战争的时候,更深入了解战争的真实代价。
第二名:战争死亡统计 作者Florence Nightingale
1855年,在争夺巴尔干半岛控制权的克里米亚战争中,英国军队与俄军和疾病两线作战。作为一位护士, 你如何说服将军们投钱在医院和医疗设施上,而不是枪炮弹药? 伟大的Florence Nightinggale(南丁格尔)用数据图表的方式展示了那些可预防疾病(蓝色和灰色区域) 导致的惊人死亡数字。 看过南丁格尔的数据可视化信息图后,卫生和医疗成了英国军队的头号要务。
第一名:人类文明的清明上河图 作者 Joseph Priestley
人类浩瀚历史长河中,无数文明、精英、国家交相辉映、盘根错节,即使是历史学家, 往往穷经皓首,也难以做到一览无余。但18世纪的一位博学的英语教师Joseph Priestley设定了一个 野心勃勃的目标:将人类历史上的国家、文明与重要历史人物之间的关系集中展现出来。 最终Joseph绘制了两个互相关联的人类文明卷轴,第一张信息图标注了人类历史上2000个重要历史人物, 第二张则绘制了人类历史上国家和民族的变迁,两张图使用相同的时间轴,可以叠加使用。
无论数据可视化还是信息图,能从有用到有趣,有趣到明显能激励人读下去,就是易读了。
商学博士Andrew Abela在2006年就总结出了一个帮助你选择图表的方法(看下图), 甚至还出了个叫chart chooser的小工具。 像这样的总结还有很多,它们的作用是让你不至于完全用错图表、表达错误。
2.知识剖析
Echarts的特性
丰富的图表类型
ECharts 提供了常规的
折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图, 用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap, 多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表, 又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。
多个坐标系的支持
ECharts 3 开始独立出了“坐标系”的概念,支持了直角坐标系(catesian,同 grid)、极坐标系(polar)、 地理坐标系(geo)。图表可以跨坐标系存在,例如折、柱、散点等图可以放在直角坐标系上, 也可以放在极坐标系上,甚至可以放在地理坐标系中。
3.常见问题
如何获取Echarat
4.解决方案
你可以通过以下几种方式获取 ECharts。
1.从官网下载界面选择你需要的版本下载
2.在 ECharts 的 GitHub 上下载最新的 release 版本,解压出 来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
3.通过 npm 获取 echarts,npm install echarts --save,详见官网的“在 webpack 中使用 echarts”
4.cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
5.编码实战
引入 ECharts
<!--引入Echarts文件-->
<script src="echarts.min.js"></script>
<!--为 ECharts 准备一个具备大小(宽高)的 DOM-->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//标题组件,包含主标题和副标题。
title: {
text: 'ECharts 入门示例'
},
//提示框组件。
tooltip: {},
//图例组件展现了不同系列的标记(symbol),颜色和名字。
// 可以通过点击图例控制哪些系列不显示。
legend: {
data: ['销量']
},
//直角坐标系 grid 中的 x 轴,一般情况下单个 grid
//组件最多只能放左右两个 x 轴,多于两个 x 轴需要通过配置 offset
// 属性防止同个位置多个 x 轴的重叠。
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
//系列列表。每个系列通过 type 决定自己的图表类型
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
6.扩展思考
异步加载
入门示例中的数据是在初始化后setOption中直接填入的, 但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
7.参考文献
配置项手册
教程
人类历史上最有影响力的五个数据可视化信息图
8.更多讨论
除了Echarts还有哪些实现数据可视化的js框架?
13个可实现超棒数据可视化效果的Javascript框架
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~
我的邀请码:64290793,或者你可以直接点击此链接:http://www.jnshu.com/login/1/64290793