1.背景介紹
Echarts是什么
ECharts來自百度EFE數(shù)據(jù)可視化團隊①，是一個純 Javascript 的圖表庫淹父，可以流暢的運行在 PC 和移動設(shè)備上， 兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11怎虫，Chrome暑认，F(xiàn)irefox，Safari等）大审，底層依賴輕量級的 Canvas 類庫 ZRender蘸际，提供直觀，生動徒扶，可交互粮彤，可高度個性化定制的數(shù)據(jù)可視化圖表。
什么是數(shù)據(jù)可視化姜骡？
數(shù)據(jù)可視化导坟，是關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。其中圈澈，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為惫周， 一種以某種概要形式抽提出來的信息，包括相應(yīng)信息單位的各種屬性和變量康栈。 它是一個處于不斷演變之中的概念闯两，其邊界在不斷地擴大。主要指的是技術(shù)上較為高級的技術(shù)方法谅将， 而這些技術(shù)方法允許利用圖形漾狼、圖像處理、計算機視覺以及用戶界面饥臂，通過表達逊躁、建模以及對立體、表面隅熙、 屬性以及動畫的顯示稽煤，對數(shù)據(jù)加以可視化解釋。 與立體建模之類的特殊技術(shù)方法相比囚戚，數(shù)據(jù)可視化所涵蓋的技術(shù)方法要廣泛得多酵熙。
數(shù)據(jù)可視化是通過處理數(shù)據(jù)來反映一些問題和規(guī)律，而不是將結(jié)果夸張化驰坊。 數(shù)據(jù)可視化已經(jīng)不滿足于信息的呈現(xiàn)匾二，而更應(yīng)該落實到有據(jù)可循的分析和決策制定中去。
人類歷史上最有影響力的五個數(shù)據(jù)可視化信息圖
第五名：倫敦霍亂地圖 作者John Snow（“權(quán)力的游戲”劇迷請淡定）
1854年倫敦爆發(fā)霍亂，10天內(nèi)有500人死去察藐，但比死亡更加讓人恐慌的是“未知”皮璧， 人們不知道霍亂的源頭和感染分布。只有流行病專家John Snow意識到分飞，源頭來自市政供水。 John在地圖上用黑杠標(biāo)注死亡案例讯檐，最終地圖“開口說話”， 顯示大街水龍頭是傳染源特碳。這張信息圖還使公眾意識到城市下水系統(tǒng)的重要性并采取切實行動站宗。
第四名：世界經(jīng)濟變遷 作者Rosling
瑞典科學(xué)家累計研究全球經(jīng)濟數(shù)據(jù)超過30年，但直到2007年他再TED Talk上以可視化的方式展示這些數(shù)據(jù)， 人們才能真正領(lǐng)略到他的數(shù)據(jù)研究的魅力钥顽。上圖是Rosling展示的大量經(jīng)濟數(shù)據(jù)圖表中的一張蝶怔， 直觀展示了全球不同國家和地區(qū)個人收入與生活期望值之間的關(guān)系澳叉。
第三名：俄法戰(zhàn)爭 作者Charles Minard
1812年拿破侖率大軍踏上征服莫斯科的艱苦旅程，結(jié)果遭遇極端天氣，98%的士兵都凍死在路上。 50年后愈捅，當(dāng)大多數(shù)法國人依然沉浸在拿破侖的榮耀中時，巴黎的工程師Charles Minard選擇用數(shù)據(jù)的 方式告訴世人這場戰(zhàn)爭的殘酷性。信息圖中的黑色粗線顯示了極端天氣如何擊敗了拿破侖的軍隊， 這張圖也讓人們在反思戰(zhàn)爭的時候，更深入了解戰(zhàn)爭的真實代價凭豪。
第二名：戰(zhàn)爭死亡統(tǒng)計 作者Florence Nightingale
1855年桐智，在爭奪巴爾干半島控制權(quán)的克里米亞戰(zhàn)爭中然磷，英國軍隊與俄軍和疾病兩線作戰(zhàn)寡润。作為一位護士致份， 你如何說服將軍們投錢在醫(yī)院和醫(yī)療設(shè)施上绍载，而不是槍炮彈藥蝠引？ 偉大的Florence Nightinggale（南丁格爾）用數(shù)據(jù)圖表的方式展示了那些可預(yù)防疾步煤弧（藍色和灰色區(qū)域） 導(dǎo)致的驚人死亡數(shù)字融蹂。 看過南丁格爾的數(shù)據(jù)可視化信息圖后意乓，衛(wèi)生和醫(yī)療成了英國軍隊的頭號要務(wù)。
第一名：人類文明的清明上河圖 作者 Joseph Priestley
人類浩瀚歷史長河中圣猎，無數(shù)文明士葫、精英、國家交相輝映送悔、盤根錯節(jié)慢显，即使是歷史學(xué)家爪模， 往往窮經(jīng)皓首，也難以做到一覽無余荚藻。但18世紀(jì)的一位博學(xué)的英語教師Joseph Priestley設(shè)定了一個 野心勃勃的目標(biāo)：將人類歷史上的國家屋灌、文明與重要歷史人物之間的關(guān)系集中展現(xiàn)出來。 最終Joseph繪制了兩個互相關(guān)聯(lián)的人類文明卷軸应狱，第一張信息圖標(biāo)注了人類歷史上2000個重要歷史人物共郭， 第二張則繪制了人類歷史上國家和民族的變遷，兩張圖使用相同的時間軸疾呻，可以疊加使用落塑。
無論數(shù)據(jù)可視化還是信息圖，能從有用到有趣罐韩，有趣到明顯能激勵人讀下去憾赁，就是易讀了。
商學(xué)博士Andrew Abela在2006年就總結(jié)出了一個幫助你選擇圖表的方法（看下圖）散吵， 甚至還出了個叫chart chooser的小工具龙考。 像這樣的總結(jié)還有很多，它們的作用是讓你不至于完全用錯圖表矾睦、表達錯誤晦款。
2.知識剖析
Echarts的特性
豐富的圖表類型
ECharts 提供了常規(guī)的
折線圖，柱狀圖枚冗，散點圖缓溅，餅圖，K線圖赁温，用于統(tǒng)計的盒形圖坛怪， 用于地理數(shù)據(jù)可視化的地圖，熱力圖股囊，線圖袜匿，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖，treemap稚疹， 多維數(shù)據(jù)可視化的平行坐標(biāo)居灯，還有用于 BI 的漏斗圖，儀表盤内狗，并且支持圖與圖之間的混搭怪嫌。
你可以在下載界面下載包含所有圖表的構(gòu)建文件，如果只是需要其中一兩個圖表柳沙， 又嫌包含所有圖表的構(gòu)建文件太大岩灭，也可以在在線構(gòu)建中選擇需要的圖表類型后自定義構(gòu)建。
多個坐標(biāo)系的支持
ECharts 3 開始獨立出了“坐標(biāo)系”的概念偎行，支持了直角坐標(biāo)系（catesian川背，同 grid）贰拿、極坐標(biāo)系（polar）、 地理坐標(biāo)系（geo）熄云。圖表可以跨坐標(biāo)系存在膨更，例如折、柱缴允、散點等圖可以放在直角坐標(biāo)系上荚守， 也可以放在極坐標(biāo)系上，甚至可以放在地理坐標(biāo)系中练般。
3.常見問題
如何獲取Echarat
4.解決方案
你可以通過以下幾種方式獲取 ECharts矗漾。
1.從官網(wǎng)下載界面選擇你需要的版本下載
2.在 ECharts 的 GitHub 上下載最新的 release 版本，解壓出 來的文件夾里的 dist 目錄里可以找到最新版本的 echarts 庫薄料。
3.通過 npm 獲取 echarts敞贡，npm install echarts --save，詳見官網(wǎng)的“在 webpack 中使用 echarts”
4.cdn 引入摄职，你可以在 cdnjs誊役，npmcdn 或者國內(nèi)的 bootcdn 上找到 ECharts 的最新版本。
5.編碼實戰(zhàn)
引入 ECharts
<!--引入Echarts文件-->
<script src="echarts.min.js"></script>
<!--為 ECharts 準(zhǔn)備一個具備大泄仁小（寬高）的 DOM-->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom蛔垢，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
//標(biāo)題組件，包含主標(biāo)題和副標(biāo)題迫悠。
title: {
text: 'ECharts 入門示例'
},
//提示框組件鹏漆。
tooltip: {},
//圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字创泄。
// 可以通過點擊圖例控制哪些系列不顯示艺玲。
legend: {
data: ['銷量']
},
//直角坐標(biāo)系 grid 中的 x 軸，一般情況下單個 grid
//組件最多只能放左右兩個 x 軸验烧，多于兩個 x 軸需要通過配置 offset
// 屬性防止同個位置多個 x 軸的重疊板驳。
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
//系列列表又跛。每個系列通過 type 決定自己的圖表類型
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表碍拆。
myChart.setOption(option);
6.擴展思考
異步加載
入門示例中的數(shù)據(jù)是在初始化后setOption中直接填入的， 但是很多時候可能數(shù)據(jù)需要異步加載后再填入慨蓝。ECharts 中實現(xiàn)異步數(shù)據(jù)的更新非常簡單感混，在圖表初始化后不管任何時候只要通過 jQuery 等工具異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項就行。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '異步數(shù)據(jù)加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
var myChart = echarts.init(document.getElementById('main'));
// 顯示標(biāo)題礼烈，圖例和空的坐標(biāo)軸
myChart.setOption({
title: {
text: '異步數(shù)據(jù)加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
// 異步加載數(shù)據(jù)
$.get('data.json').done(function (data) {
// 填入數(shù)據(jù)
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據(jù)名字對應(yīng)到相應(yīng)的系列
name: '銷量',
data: data.data
}]
});
});
7.參考文獻
配置項手冊
教程
人類歷史上最有影響力的五個數(shù)據(jù)可視化信息圖
8.更多討論
除了Echarts還有哪些實現(xiàn)數(shù)據(jù)可視化的js框架弧满？
13個可實現(xiàn)超棒數(shù)據(jù)可視化效果的Javascript框架
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始此熬，找個師兄庭呜，帶你入門滑进，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷媚蓟眩”扶关。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線数冬，學(xué)習(xí)透明化节槐，成長可見化，師兄1對1免費指導(dǎo)拐纱⊥欤快來與我一起學(xué)習(xí)吧~
我的邀請碼：64290793，或者你可以直接點擊此鏈接：http://www.jnshu.com/login/1/64290793
