【郑州分院第一百二十二期】如何使用ECHARTS?

1.背景介绍

Echarts是什么

ECharts来自百度EFE数据可视化团队①,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上, 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

什么是数据可视化?

数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为, 一种以某种概要形式抽提出来的信息,包括相应信息单位的各种属性和变量。 它是一个处于不断演变之中的概念,其边界在不断地扩大。主要指的是技术上较为高级的技术方法, 而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面,通过表达、建模以及对立体、表面、 属性以及动画的显示,对数据加以可视化解释。 与立体建模之类的特殊技术方法相比,数据可视化所涵盖的技术方法要广泛得多。

数据可视化是通过处理数据来反映一些问题和规律,而不是将结果夸张化。 数据可视化已经不满足于信息的呈现,而更应该落实到有据可循的分析和决策制定中去。

人类历史上最有影响力的五个数据可视化信息图

第五名:伦敦霍乱地图 作者John Snow(“权力的游戏”剧迷请淡定)

1854年伦敦爆发霍乱,10天内有500人死去,但比死亡更加让人恐慌的是“未知”, 人们不知道霍乱的源头和感染分布。只有流行病专家John Snow意识到,源头来自市政供水。 John在地图上用黑杠标注死亡案例,最终地图“开口说话”, 显示大街水龙头是传染源。这张信息图还使公众意识到城市下水系统的重要性并采取切实行动。

【郑州分院第一百二十二期】如何使用ECHARTS?_第1张图片

第四名:世界经济变迁 作者Rosling

瑞典科学家累计研究全球经济数据超过30年,但直到2007年他再TED Talk上以可视化的方式展示这些数据, 人们才能真正领略到他的数据研究的魅力。上图是Rosling展示的大量经济数据图表中的一张, 直观展示了全球不同国家和地区个人收入与生活期望值之间的关系。

【郑州分院第一百二十二期】如何使用ECHARTS?_第2张图片

第三名:俄法战争 作者Charles Minard


1812年拿破仑率大军踏上征服莫斯科的艰苦旅程,结果遭遇极端天气,98%的士兵都冻死在路上。 50年后,当大多数法国人依然沉浸在拿破仑的荣耀中时,巴黎的工程师Charles Minard选择用数据的 方式告诉世人这场战争的残酷性。信息图中的黑色粗线显示了极端天气如何击败了拿破仑的军队, 这张图也让人们在反思战争的时候,更深入了解战争的真实代价。

【郑州分院第一百二十二期】如何使用ECHARTS?_第3张图片

第二名:战争死亡统计 作者Florence Nightingale

1855年,在争夺巴尔干半岛控制权的克里米亚战争中,英国军队与俄军和疾病两线作战。作为一位护士, 你如何说服将军们投钱在医院和医疗设施上,而不是枪炮弹药? 伟大的Florence Nightinggale(南丁格尔)用数据图表的方式展示了那些可预防疾病(蓝色和灰色区域) 导致的惊人死亡数字。 看过南丁格尔的数据可视化信息图后,卫生和医疗成了英国军队的头号要务。

【郑州分院第一百二十二期】如何使用ECHARTS?_第4张图片

第一名:人类文明的清明上河图 作者 Joseph Priestley

人类浩瀚历史长河中,无数文明、精英、国家交相辉映、盘根错节,即使是历史学家, 往往穷经皓首,也难以做到一览无余。但18世纪的一位博学的英语教师Joseph Priestley设定了一个 野心勃勃的目标:将人类历史上的国家、文明与重要历史人物之间的关系集中展现出来。 最终Joseph绘制了两个互相关联的人类文明卷轴,第一张信息图标注了人类历史上2000个重要历史人物, 第二张则绘制了人类历史上国家和民族的变迁,两张图使用相同的时间轴,可以叠加使用。

【郑州分院第一百二十二期】如何使用ECHARTS?_第5张图片

【郑州分院第一百二十二期】如何使用ECHARTS?_第6张图片

无论数据可视化还是信息图,能从有用到有趣,有趣到明显能激励人读下去,就是易读了。

商学博士Andrew Abela在2006年就总结出了一个帮助你选择图表的方法(看下图), 甚至还出了个叫chart chooser的小工具。 像这样的总结还有很多,它们的作用是让你不至于完全用错图表、表达错误。

【郑州分院第一百二十二期】如何使用ECHARTS?_第7张图片

2.知识剖析

Echarts的特性

丰富的图表类型

ECharts 提供了常规的

折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图, 用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap, 多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表, 又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。

多个坐标系的支持

ECharts 3 开始独立出了“坐标系”的概念,支持了直角坐标系(catesian,同 grid)、极坐标系(polar)、 地理坐标系(geo)。图表可以跨坐标系存在,例如折、柱、散点等图可以放在直角坐标系上, 也可以放在极坐标系上,甚至可以放在地理坐标系中。

【郑州分院第一百二十二期】如何使用ECHARTS?_第8张图片

【郑州分院第一百二十二期】如何使用ECHARTS?_第9张图片
【郑州分院第一百二十二期】如何使用ECHARTS?_第10张图片

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?)