1.背景介紹

Echarts是什么

ECharts來自百度EFE數(shù)據(jù)可視化團(tuán)隊(duì)①，是一個(gè)純 Javascript 的圖表庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上， 兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的 Canvas 類庫 ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

什么是數(shù)據(jù)可視化？

數(shù)據(jù)可視化，是關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。其中，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為， 一種以某種概要形式抽提出來的信息，包括相應(yīng)信息單位的各種屬性和變量。 它是一個(gè)處于不斷演變之中的概念，其邊界在不斷地?cái)U(kuò)大。主要指的是技術(shù)上較為高級(jí)的技術(shù)方法， 而這些技術(shù)方法允許利用圖形、圖像處理、計(jì)算機(jī)視覺以及用戶界面，通過表達(dá)、建模以及對(duì)立體、表面、 屬性以及動(dòng)畫的顯示，對(duì)數(shù)據(jù)加以可視化解釋。 與立體建模之類的特殊技術(shù)方法相比，數(shù)據(jù)可視化所涵蓋的技術(shù)方法要廣泛得多。

數(shù)據(jù)可視化是通過處理數(shù)據(jù)來反映一些問題和規(guī)律，而不是將結(jié)果夸張化。 數(shù)據(jù)可視化已經(jīng)不滿足于信息的呈現(xiàn)，而更應(yīng)該落實(shí)到有據(jù)可循的分析和決策制定中去。

人類歷史上最有影響力的五個(gè)數(shù)據(jù)可視化信息圖

第五名：倫敦霍亂地圖 作者John Snow（“權(quán)力的游戲”劇迷請淡定）

1854年倫敦爆發(fā)霍亂，10天內(nèi)有500人死去，但比死亡更加讓人恐慌的是“未知”， 人們不知道霍亂的源頭和感染分布。只有流行病專家John Snow意識(shí)到，源頭來自市政供水。 John在地圖上用黑杠標(biāo)注死亡案例，最終地圖“開口說話”， 顯示大街水龍頭是傳染源。這張信息圖還使公眾意識(shí)到城市下水系統(tǒng)的重要性并采取切實(shí)行動(dòng)。

第四名：世界經(jīng)濟(jì)變遷 作者Rosling

瑞典科學(xué)家累計(jì)研究全球經(jīng)濟(jì)數(shù)據(jù)超過30年，但直到2007年他再TED Talk上以可視化的方式展示這些數(shù)據(jù)， 人們才能真正領(lǐng)略到他的數(shù)據(jù)研究的魅力。上圖是Rosling展示的大量經(jīng)濟(jì)數(shù)據(jù)圖表中的一張， 直觀展示了全球不同國家和地區(qū)個(gè)人收入與生活期望值之間的關(guān)系。

第三名：俄法戰(zhàn)爭 作者Charles Minard

1812年拿破侖率大軍踏上征服莫斯科的艱苦旅程，結(jié)果遭遇極端天氣，98%的士兵都凍死在路上。 50年后，當(dāng)大多數(shù)法國人依然沉浸在拿破侖的榮耀中時(shí)，巴黎的工程師Charles Minard選擇用數(shù)據(jù)的 方式告訴世人這場戰(zhàn)爭的殘酷性。信息圖中的黑色粗線顯示了極端天氣如何擊敗了拿破侖的軍隊(duì)， 這張圖也讓人們在反思戰(zhàn)爭的時(shí)候，更深入了解戰(zhàn)爭的真實(shí)代價(jià)。

第二名：戰(zhàn)爭死亡統(tǒng)計(jì) 作者Florence Nightingale

1855年，在爭奪巴爾干半島控制權(quán)的克里米亞戰(zhàn)爭中，英國軍隊(duì)與俄軍和疾病兩線作戰(zhàn)。作為一位護(hù)士， 你如何說服將軍們投錢在醫(yī)院和醫(yī)療設(shè)施上，而不是槍炮彈藥？ 偉大的Florence Nightinggale（南丁格爾）用數(shù)據(jù)圖表的方式展示了那些可預(yù)防疾?。ㄋ{(lán)色和灰色區(qū)域） 導(dǎo)致的驚人死亡數(shù)字。 看過南丁格爾的數(shù)據(jù)可視化信息圖后，衛(wèi)生和醫(yī)療成了英國軍隊(duì)的頭號(hào)要?jiǎng)?wù)。

第一名：人類文明的清明上河圖 作者 Joseph Priestley

人類浩瀚歷史長河中，無數(shù)文明、精英、國家交相輝映、盤根錯(cuò)節(jié)，即使是歷史學(xué)家， 往往窮經(jīng)皓首，也難以做到一覽無余。但18世紀(jì)的一位博學(xué)的英語教師Joseph Priestley設(shè)定了一個(gè) 野心勃勃的目標(biāo)：將人類歷史上的國家、文明與重要?dú)v史人物之間的關(guān)系集中展現(xiàn)出來。 最終Joseph繪制了兩個(gè)互相關(guān)聯(lián)的人類文明卷軸，第一張信息圖標(biāo)注了人類歷史上2000個(gè)重要?dú)v史人物， 第二張則繪制了人類歷史上國家和民族的變遷，兩張圖使用相同的時(shí)間軸，可以疊加使用。

無論數(shù)據(jù)可視化還是信息圖，能從有用到有趣，有趣到明顯能激勵(lì)人讀下去，就是易讀了。

商學(xué)博士Andrew Abela在2006年就總結(jié)出了一個(gè)幫助你選擇圖表的方法（看下圖）， 甚至還出了個(gè)叫chart chooser的小工具。 像這樣的總結(jié)還有很多，它們的作用是讓你不至于完全用錯(cuò)圖表、表達(dá)錯(cuò)誤。

2.知識(shí)剖析

Echarts的特性

豐富的圖表類型

ECharts 提供了常規(guī)的

折線圖，柱狀圖，散點(diǎn)圖，餅圖，K線圖，用于統(tǒng)計(jì)的盒形圖， 用于地理數(shù)據(jù)可視化的地圖，熱力圖，線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖，treemap， 多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

你可以在下載界面下載包含所有圖表的構(gòu)建文件，如果只是需要其中一兩個(gè)圖表， 又嫌包含所有圖表的構(gòu)建文件太大，也可以在在線構(gòu)建中選擇需要的圖表類型后自定義構(gòu)建。

多個(gè)坐標(biāo)系的支持

ECharts 3 開始獨(dú)立出了“坐標(biāo)系”的概念，支持了直角坐標(biāo)系（catesian，同 grid）、極坐標(biāo)系（polar）、 地理坐標(biāo)系（geo）。圖表可以跨坐標(biāo)系存在，例如折、柱、散點(diǎn)等圖可以放在直角坐標(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.編碼實(shí)戰(zhàn)

引入 ECharts

<!--引入Echarts文件-->

<script src="echarts.min.js"></script>

<!--為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?DOM-->

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例

var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項(xiàng)和數(shù)據(jù)

var option = {

//標(biāo)題組件，包含主標(biāo)題和副標(biāo)題。

title: {

text: 'ECharts 入門示例'

},

//提示框組件。

tooltip: {},

//圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字。

// 可以通過點(diǎn)擊圖例控制哪些系列不顯示。

legend: {

data: ['銷量']

},

//直角坐標(biāo)系 grid 中的 x 軸，一般情況下單個(gè) grid

//組件最多只能放左右兩個(gè) x 軸，多于兩個(gè) x 軸需要通過配置 offset

// 屬性防止同個(gè)位置多個(gè) x 軸的重疊。

xAxis: {

data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]

},

yAxis: {},

//系列列表。每個(gè)系列通過 type 決定自己的圖表類型

series: [{

name: '銷量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。

myChart.setOption(option);

6.擴(kuò)展思考

異步加載

入門示例中的數(shù)據(jù)是在初始化后setOption中直接填入的， 但是很多時(shí)候可能數(shù)據(jù)需要異步加載后再填入。ECharts 中實(shí)現(xiàn)異步數(shù)據(jù)的更新非常簡單，在圖表初始化后不管任何時(shí)候只要通過 jQuery 等工具異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項(xiàng)就行。

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ù)名字對(duì)應(yīng)到相應(yīng)的系列

name: '銷量',

data: data.data

}]

});

});

7.參考文獻(xiàn)

配置項(xiàng)手冊

教程

人類歷史上最有影響力的五個(gè)數(shù)據(jù)可視化信息圖

8.更多討論

除了Echarts還有哪些實(shí)現(xiàn)數(shù)據(jù)可視化的js框架？

13個(gè)可實(shí)現(xiàn)超棒數(shù)據(jù)可視化效果的Javascript框架

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

技能樹.IT修真院

“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。

這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧~

我的邀請碼：64290793，或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/64290793