有這樣一款制作圖表的工具棠枉，掌握了它株灸，你就入門(mén)了數(shù)據(jù)可視化；掌握了它，你就能做出可交互的動(dòng)態(tài)圖表碍讯；掌握了它，你甚至可以說(shuō)你開(kāi)始接觸大數(shù)據(jù)了...所謂神器粘勒，就是可為你打開(kāi)一扇大門(mén)对蒲，進(jìn)入另外一個(gè)嶄新世界的敲門(mén)磚，這里我們將向你介紹一下Echarts川蒙。
Echarts (http://echarts.baidu.com/)是百度公司出品的蚜厉，算是百度不可多得的良心之作。要徹底掌握Echarts派歌，你需要掌握一點(diǎn)前端開(kāi)發(fā)的知識(shí)弯囊，這些知識(shí)也是你花幾周的時(shí)間就可以學(xué)會(huì)的（這里需要你掌握一點(diǎn)html、css胶果、javascript的知識(shí)）匾嘱。不過(guò)即使是小白，也能發(fā)現(xiàn)它大大的有用早抠，話不多少霎烙，我們直接上案例，通過(guò)案例蕊连，我們來(lái)說(shuō)明這個(gè)神器強(qiáng)大之處悬垃。
玩轉(zhuǎn)中國(guó)地圖的數(shù)據(jù)可視化
我們?cè)谶\(yùn)營(yíng)當(dāng)中，有很多數(shù)據(jù)是需要基于地圖的甘苍，既有定性的尝蠕，如熱度，程度之類(lèi)的载庭；也可以展示定量的看彼，如具體的數(shù)據(jù)多少等等廊佩。這樣的場(chǎng)景很多，比如老板想讓商品的銷(xiāo)售情況在地圖上直觀的展示出來(lái)靖榕，或者能夠了解消費(fèi)者群體在全國(guó)的分布标锄。有了地圖的數(shù)據(jù)可視化，就能讓你擁有一種空間的大局觀茁计。老板是不是就喜歡這種感覺(jué)料皇？
比如Echarts給出的案例：全國(guó)主要城市的空氣質(zhì)量。
每個(gè)城市就有一個(gè)小點(diǎn)星压，如果大家是用通常使用的圖形化界面Excel践剂、photoshop或其他工具來(lái)操作這些城市的定位，光十幾個(gè)城市就要下一番大工夫租幕，其實(shí)國(guó)內(nèi)不乏有人這么去作圖舷手，導(dǎo)致城市的定位不準(zhǔn)，這確實(shí)太考驗(yàn)一個(gè)人的地理知識(shí)了劲绪，而如果說(shuō)有數(shù)十個(gè)城市男窟，既要顧及精準(zhǔn)度，又要顯示不同城市的污染程度贾富，則非要用數(shù)據(jù)的可視化不可歉眷。這里有190個(gè)城市，是不是開(kāi)始覺(jué)得有一點(diǎn)大數(shù)據(jù)的味道了颤枪。
再比如Echarts給出的另外一個(gè)案例產(chǎn)品的銷(xiāo)量：
這張圖的信息量是非常之大的汗捡，非得用gif圖片向大家展示不可。尋常工具更是萬(wàn)不可能做到的畏纲。
首先它顯示了iPhone三款產(chǎn)品在全國(guó)各省份的銷(xiāo)量信息扇住，一張表格顯示多個(gè)產(chǎn)品的銷(xiāo)售信息，這是通常的靜態(tài)表格無(wú)法做到的盗胀，因?yàn)樗嬖谥a(chǎn)品的切換艘蹋，在gif里面可以看到，左上角我們可以任意選擇查看某一款或者某兩款產(chǎn)品在全國(guó)的銷(xiāo)售情況票灰。
其次女阀，它是用顏色來(lái)標(biāo)明的，利用不同顏色來(lái)填充屑迂，這種極其具有可視化效果的方式浸策，我們可以很輕易的看出產(chǎn)品在全國(guó)各省市定性的數(shù)據(jù)。給不同省市填充顏色(我相信填充地圖這種事情惹盼，在工作之中尤其是做信息圖的朋友是經(jīng)常會(huì)遇到的)庸汗，全國(guó)有30多個(gè)省市，這個(gè)工作我之前用photoshop做過(guò)手报，工作量堪稱苦逼級(jí)夫晌、民工級(jí)雕薪。通過(guò)生活工作中很多案例昧诱，我有一個(gè)切身肉痛的體會(huì)：當(dāng)你遇到極其二逼苦逼的工作量時(shí)晓淀，請(qǐng)嘗試用程序解決，這也是HackWeek技術(shù)社區(qū)要普及技術(shù)的原因之一盏档。
第三凶掰，當(dāng)你把鼠標(biāo)移到每個(gè)省市在地圖的區(qū)域時(shí)，可以看到產(chǎn)品銷(xiāo)售定量的數(shù)據(jù)蜈亩。這種可以交互的展示方式懦窘，如果是jpg、png格式稚配，哪怕是gif格式是沒(méi)法做到的畅涂，就在幾年前還有人使用Flash制作。不過(guò)Flash已經(jīng)在江湖徹底沒(méi)落道川，而代之興起的就是HTML5午衰，而基于javascript的Echarts更有Flash難有可以適配多種終端，在手機(jī)上也能愉快打開(kāi)的優(yōu)點(diǎn)冒萄。
如果只想展示某一單個(gè)省的數(shù)據(jù)呢臊岸，比如廣東省尊流？Echarts有國(guó)內(nèi)各個(gè)省市的單獨(dú)地圖可以下載帅戒。下圖中的JS和JSON就是javascript里面的技術(shù)了，你甚至只需要掌握一點(diǎn)皮毛的javascript就可以勝任這些了崖技。
Echarts還可以做基于某一個(gè)具體的城市甚至某個(gè)區(qū)的地圖逻住，比如具體到廣東省深圳市，或者廣東省深圳市南山區(qū)迎献，這些都可以瞎访。
如此簡(jiǎn)單，卻更勝一籌
打開(kāi)Excel和Mac的Numbers里面所帶有的圖表功能忿晕，我們可以看到一些基本的圖表類(lèi)型装诡，如柱形圖、折線圖践盼、餅圖鸦采、條形圖、面積圖咕幻、散點(diǎn)圖等等這些基本的圖表類(lèi)型渔伯，用Echarts都可以實(shí)現(xiàn)，那么我們來(lái)整體看一下Echarts可以做哪些圖表類(lèi)型肄程。锣吼、
Echarts可以使用的圖表類(lèi)型不亞于Excel和Numbers选浑，但由于它是基于程序代碼的，可以通過(guò)程序來(lái)控制數(shù)據(jù)玄叠，因此能夠做到及時(shí)拓展數(shù)據(jù)古徒，比如支付寶有上億的用戶，每個(gè)用戶都有芝麻信用分读恃，展示芝麻信用分用的就是雷達(dá)圖隧膘，上億用戶的雷達(dá)圖都不一樣，而且能夠?qū)崟r(shí)變化寺惫，這就只有程序可以做到了疹吃，是一款真正基于大數(shù)據(jù)的工具。
那使用Echarts難嗎西雀？我們來(lái)看下面的代碼案例萨驶，大家只需要復(fù)制下面的代碼到代碼編輯器，保存為html文件艇肴，用瀏覽器打開(kāi)就能看到效果了腔呜。
當(dāng)刷新瀏覽器的時(shí)候，你可以看到一個(gè)動(dòng)態(tài)的效果豆挽，當(dāng)把鼠標(biāo)放到柱形圖上面的時(shí)候育谬，你又可以看到每個(gè)柱形圖的具體數(shù)據(jù)。是不是很酷帮哈？而上面的代碼可能有些你不大懂膛檀，但是看到效果之后，你甚至都可以無(wú)師自通去修改了娘侍。當(dāng)然我們更加希望你能夠更加深入去了解一下前端開(kāi)發(fā)的知識(shí)咖刃，即使會(huì)一些皮毛，也能徹底掌握它憾筏。
值得說(shuō)明的是在上圖的代碼里嚎杨，我引用了七牛云的CDN資源(https://www.staticfile.org/)。提供一些免費(fèi)的CDN服務(wù)氧腰，是一個(gè)大廠負(fù)有社會(huì)責(zé)任心的表現(xiàn)枫浙，以前百度、360也提供過(guò)一些靜態(tài)資源的CDN服務(wù)古拴，不過(guò)可惜的是他們先后都停掉了箩帚。分享以及持續(xù)的分享，是國(guó)內(nèi)技術(shù)圈所缺乏的黄痪，也正因如此國(guó)內(nèi)優(yōu)秀的開(kāi)源項(xiàng)目可以說(shuō)是寥寥無(wú)幾紧帕。
應(yīng)用廣泛，趨勢(shì)使然
我們現(xiàn)在正處于大數(shù)據(jù)的時(shí)代桅打，有數(shù)據(jù)的地方是嗜，就會(huì)少不了數(shù)據(jù)的可視化愈案。數(shù)據(jù)可視化可以讓數(shù)據(jù)呈現(xiàn)的更加直觀、及時(shí)鹅搪，而又簡(jiǎn)單站绪。數(shù)據(jù)可視化的應(yīng)用貫穿于多個(gè)行業(yè)，如商業(yè)智能涩嚣、金融崇众、新聞媒體、銷(xiāo)售航厚、財(cái)務(wù)、運(yùn)營(yíng)锰蓬、公共服務(wù)等幔睬。
現(xiàn)在幾乎每個(gè)比較大型的網(wǎng)站以及APP的后臺(tái)，他們的首頁(yè)都會(huì)是一個(gè)Dashboard芹扭。如下圖所示：
我們?cè)賮?lái)看下來(lái)自百度百科關(guān)于Dashboard的定義:
dashboard是商業(yè)智能儀表盤(pán)（business intelligence dashboard麻顶，BI dashboard）的簡(jiǎn)稱，它是一般商業(yè)智能都擁有的實(shí)現(xiàn)數(shù)據(jù)可視化的模塊舱卡，是向企業(yè)展示度量信息和關(guān)鍵業(yè)務(wù)指標(biāo)（KPI）現(xiàn)狀的數(shù)據(jù)虛擬化工具辅肾。
由于數(shù)據(jù)可視化的很多工具是基于前端的，如Echarts轮锥、Highcharts矫钓、D3等，很多學(xué)了前端又苦于前端知識(shí)更新速度過(guò)于快速的朋友舍杜，也可以轉(zhuǎn)型為可視化工程師新娜。
關(guān)于數(shù)據(jù)可視化，特意向大家推薦兩個(gè)很不錯(cuò)的視頻既绩，供大家學(xué)習(xí)參考：
