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
