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

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框架


如何使用ECHARTS?_腾讯视频

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请码:64290793,或者你可以直接点击此链接:http://www.jnshu.com/login/1/64290793

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容