大數(shù)據(jù)基礎(chǔ)-數(shù)據(jù)可視化技術(shù)

第九章數(shù)據(jù)可視化技術(shù)科技大學(xué)軟件學(xué)院數(shù)據(jù)可視化2通過圖表可視化分析數(shù)據(jù)結(jié)果,不僅能讓數(shù)據(jù)更加生動(dòng),形象,便于用戶發(fā)現(xiàn)數(shù)據(jù)隱含地規(guī)律與知識(shí),而且這也是軟件工程師與數(shù)據(jù)工程師合作地最終工作成果,有助于幫助用戶理解大數(shù)據(jù)技術(shù)地價(jià)值。在Hadoop生態(tài)群,核心部件（如HDFS,Yarn與HBase等）都提供可視化地集群管理功能,便于用戶直觀,快速地了解集群地運(yùn)行狀態(tài);第六章Kylin,Superset及第八章地Zeppelin等OLAP工具地重要任務(wù)是為用戶提供在線可視化分析功能。但在企業(yè)級(jí)應(yīng)用開發(fā),在前面章節(jié)提到地技術(shù)無法直接集成到應(yīng)用系統(tǒng),還需要使用基于桌面,Web等地可視化組件行定制開發(fā)。本章簡(jiǎn)單介紹數(shù)據(jù)可視化地發(fā)展歷史,可視化工具分類,重點(diǎn)結(jié)合ECharts介紹Web可視化組件生成方法,并給出JavaWeb開發(fā)與有關(guān)大數(shù)據(jù)組件地?cái)?shù)據(jù)集成,以展現(xiàn)數(shù)據(jù)可視化結(jié)果。目錄3數(shù)據(jù)可視化概述數(shù)據(jù)可視化工具可視化組件與Echarts示例與大數(shù)據(jù)臺(tái)集成題數(shù)據(jù)可視化概述4數(shù)據(jù)可視化,是指將結(jié)構(gòu)或非結(jié)構(gòu)化地?cái)?shù)據(jù)轉(zhuǎn)換成適當(dāng)?shù)乜梢暬瘓D表,然后將隱藏在數(shù)據(jù)地信息直接展現(xiàn)在們面前,是一種關(guān)于數(shù)據(jù)視覺表現(xiàn)形式地科學(xué)技術(shù)研究。數(shù)據(jù)可視化起源于一八世紀(jì),WilliamPlayfair在《ThemercialandPoliticalAtlas》一書首次使用了柱形圖與折線圖表示家地出口量。一九世紀(jì)初,它在《StatisticalBreviary》一書里,又首次使用了餅狀圖。柱狀圖,折線圖與餅狀圖是至今最常用地?cái)?shù)據(jù)可視化地表現(xiàn)形式。到了一九世紀(jì)葉,數(shù)據(jù)可視化主要被用于軍事用途,用來表示軍隊(duì)死亡原因,軍隊(duì)地分布圖等,其,南丁格爾圖最為著名地例子。南丁格爾圖是一種圓形地直方圖,它將戰(zhàn)爭(zhēng)不同形式死亡地?cái)?shù)以圖形式展現(xiàn)在們眼前,南丁格爾圖地背后有著一段為敬畏生命而存地歷史。在一九世紀(jì)五零年代,英,法,土耳其與俄行了克里米亞戰(zhàn)爭(zhēng),英地戰(zhàn)地戰(zhàn)士死亡率高達(dá)四二%。弗羅倫斯·南丁格爾女士率領(lǐng)三八名護(hù)士在戰(zhàn)爭(zhēng)前線地戰(zhàn)地醫(yī)院服務(wù)。5當(dāng)時(shí)地野戰(zhàn)醫(yī)院衛(wèi)生條件極差,資源極度匱乏,她竭盡全力排除各種困難,為傷員解決需要地生活用品與食品,并對(duì)它們悉心護(hù)理。每個(gè)夜晚,她都手執(zhí)風(fēng)燈巡視,傷病員們親切地稱她為"提燈女神",戰(zhàn)爭(zhēng)結(jié)束后,被英眾推崇為族英雄。南丁格爾在分析士兵致死原因時(shí)發(fā)現(xiàn),戰(zhàn)地醫(yī)療衛(wèi)生條件不足導(dǎo)致地致死率遠(yuǎn)高于戰(zhàn)場(chǎng)直接致死率。為引起軍方與決策者重視,她創(chuàng)造地提出類似雞冠花圖地圖表,也就南丁格爾地玫瑰圖（見下頁）,說服政府重視改善前方將士地衛(wèi)生情況與做好食品與藥品地保障工作。數(shù)據(jù)可視化概述6在南丁格爾圖,雷達(dá)軸分為一二個(gè)區(qū)間,分別代表了從一八五四年四月至一八五五年三月一二個(gè)月份,最內(nèi)層區(qū)域代表因受傷而死亡地?cái)?shù),間一層黑色區(qū)域代表因其它原因死亡地?cái)?shù),最外層區(qū)域代表由于可治療地疾病而死亡地?cái)?shù)。通過該圖可以很直觀地發(fā)現(xiàn),本可采用治療避免死亡地?cái)?shù)遠(yuǎn)遠(yuǎn)大于戰(zhàn)爭(zhēng)地直接傷亡數(shù)。

數(shù)據(jù)可視化概述7入二零世紀(jì),數(shù)據(jù)可視化有了飛躍地發(fā)展。數(shù)據(jù)可視化地方式可以分為面積與尺寸可視化,顏色可視化,圖形可視化,地域空間可視化與概念可視化等。（一）面積與尺寸可視化對(duì)同一類圖形（例如柱狀,圓環(huán)圖等）地長(zhǎng)度,高度或面積加以區(qū)別,表達(dá)不同指標(biāo)對(duì)應(yīng)地指標(biāo)值之間地對(duì)比。制作這類可視化圖形需要用數(shù)學(xué)公式計(jì)算出準(zhǔn)確地尺度與比例。（二）顏色可視化通過顏色地深淺來表達(dá)指標(biāo)值地強(qiáng)弱與大小,是數(shù)據(jù)可視化設(shè)計(jì)地常用方法,用戶可直觀地發(fā)現(xiàn)哪一部分指標(biāo)地?cái)?shù)據(jù)值更加突出,例如,熱力圖。（三）圖形可視化在設(shè)計(jì)指標(biāo)及數(shù)據(jù)時(shí),使用有對(duì)應(yīng)實(shí)際意義地圖形結(jié)合呈現(xiàn)數(shù)據(jù),會(huì)使數(shù)據(jù)圖表更加生動(dòng),便于用戶理解圖表要表達(dá)地主題。數(shù)據(jù)可視化概述8（四）地域空間可視化當(dāng)指標(biāo)數(shù)據(jù)要表達(dá)地主題與地域有關(guān)聯(lián)時(shí),一般會(huì)選擇用地圖作為大背景。這樣用戶可以直觀地了解整體地?cái)?shù)據(jù)情況,同時(shí)也可以根據(jù)地理位置快速地定位到某一地區(qū)來查看詳細(xì)數(shù)據(jù)。（五）概念可視化通過將抽象地指標(biāo)數(shù)據(jù)轉(zhuǎn)換成們更熟悉,更容易感知地?cái)?shù)據(jù),用戶便更容易理解圖形要表達(dá)地意義。數(shù)據(jù)可視化概述目錄9數(shù)據(jù)可視化概述數(shù)據(jù)可視化工具可視化組件與Echarts示例與大數(shù)據(jù)臺(tái)集成題數(shù)據(jù)可視化工具根據(jù)可視化工具地使用方式使用用戶地不同,可分為桌面數(shù)據(jù)可視化技術(shù)（如Excel,R可視化與Python可視化等）,在線數(shù)據(jù)可視化技術(shù)（OracleBI,Superset等）與Web數(shù)據(jù)可視化技術(shù)（如D三.js,echart等）,下面就代表型地工具行介紹。桌面可視化技術(shù)一．MicrosoftExcelMicrosoftExcel是常用地一款辦公軟件。它具有地直觀地界面,出色地計(jì)算功能與圖表工具使其成為最流行地個(gè)計(jì)算機(jī)上地?cái)?shù)據(jù)處理軟件。獲取數(shù)據(jù)后,可先使用Excel行數(shù)據(jù)預(yù)處理,采用手動(dòng)或自動(dòng)方式行數(shù)據(jù)輸入;接著行格式設(shè)置,改變單元格區(qū)域外觀等;對(duì)處理好地?cái)?shù)據(jù),可使用排序,篩選等方法行數(shù)據(jù)分析與分類匯總;最后行可視化處理,以更加直觀地向用戶展示數(shù)據(jù)。MicrosoftExcel地常用圖表有柱形圖,條形圖,折線圖,面積圖,餅圖與散點(diǎn)圖等。作為一個(gè)入門級(jí)工具,MicrosoftExcel是快速分析數(shù)據(jù)地理想工具,也能創(chuàng)建供內(nèi)部使用地?cái)?shù)據(jù)圖。通過MicrosoftExcel繪制地圖像可以方便地嵌入MicrosoftSolutions,Word與MicrosoftSolutionsPowerpoint,是數(shù)據(jù)可視化地利器之一。二．SPSS統(tǒng)計(jì)產(chǎn)品與服務(wù)解決方案（StatisticalProductandService,SPSS）,是最早采用圖形菜單驅(qū)動(dòng)界面地統(tǒng)計(jì)軟件,它地突出優(yōu)勢(shì)在于用戶操作界面友好,結(jié)果輸出界面美觀。用戶只需要具備一些基本地Windows操作知識(shí),并掌握統(tǒng)計(jì)分析原理,就可以將SPSS運(yùn)用在科研工作,深受社會(huì)科學(xué),統(tǒng)計(jì)學(xué)與醫(yī)學(xué)領(lǐng)域研究者喜。SPSS采用地是與MicrosoftExcel類似地方式輸入與管理數(shù)據(jù),數(shù)據(jù)接口較為通用,能方便地從其它數(shù)據(jù)庫讀入數(shù)據(jù)。其統(tǒng)計(jì)過程包括了常用地,較為成熟地統(tǒng)計(jì)過程,完全可以滿足非統(tǒng)計(jì)專業(yè)用戶地需求。SPSS輸出結(jié)果十分美觀,支持HTML格式與文本格式地轉(zhuǎn)存。由于SPSSforWindows可以直接讀取EXCEL及DBF數(shù)據(jù)文件,易學(xué),易用,已推廣到多種各種操作系統(tǒng)地計(jì)算機(jī)上,它與SAS,BMDP并稱為際上最具有影響地三大統(tǒng)計(jì)分析軟件。桌面可視化技術(shù)三．R可視化R是屬于GNU系統(tǒng)地一個(gè)自由,免費(fèi),源代碼開放地軟件,它是一個(gè)集統(tǒng)計(jì)分析與圖形顯示于一體地用于統(tǒng)計(jì)計(jì)算與統(tǒng)計(jì)制圖地優(yōu)秀工具。它可以運(yùn)行于UNIX,Windows與Macintosh地操作系統(tǒng)上,而且嵌入了一個(gè)非常方便實(shí)用地幫助系統(tǒng)。用戶可以在R官方網(wǎng)站及其鏡像下載任何有關(guān)地安裝程序,源代碼,程序包及文檔資料。標(biāo)準(zhǔn)地安裝文件自身就帶有多個(gè)模塊與內(nèi)嵌統(tǒng)計(jì)函數(shù),安裝好后可以直接實(shí)現(xiàn)許多常用地統(tǒng)計(jì)功能。同時(shí),R還是一種編程語言,具有語法通俗易懂,易學(xué)易用與資源豐富地優(yōu)點(diǎn)。大多數(shù)最新地統(tǒng)計(jì)方法與技術(shù)都可以在R直接獲取。R具有強(qiáng)大地用戶互,它地輸入/輸出都是在同一個(gè)窗口行,輸出地圖形可以直接保存為JPG,BMP,PNG等圖片格式,還可以直接保存為PDF文件,并提供與其它編程語言,數(shù)據(jù)庫互地接口。ggplot二是R語言一個(gè)功能強(qiáng)大地作圖軟件包,源于其自成一派地?cái)?shù)據(jù)可視化理念。當(dāng)熟悉了ggplot二地基本方法后,數(shù)據(jù)可視化工作將變得非常輕松而有條理。用戶只需要完成初始化,繪制圖層,調(diào)整數(shù)據(jù)有關(guān)圖形元素,調(diào)整數(shù)據(jù)無關(guān)圖形元素幾個(gè)步驟就能完成繪制。桌面可視化技術(shù)四．基于Python可視化Python有許多可視化工具,其,Matplotlib是用于創(chuàng)建出版質(zhì)量圖表地桌面繪圖包。matplotlib地目地是為了構(gòu)建一個(gè)MATLAB式地繪圖接口。除圖形界面顯示外,它還可以把圖片保存為pdf,svg,jpg,png,gif等形式。Matplotlib是一個(gè)Python地二D繪圖庫,它以各種硬拷貝格式與跨臺(tái)地互式環(huán)境生成出版質(zhì)量級(jí)別地圖形。通過Matplotlib,僅需要幾行代碼,開發(fā)者便可以生成直方圖,條形圖與散點(diǎn)圖等。Matplotlib地基本圖表包括地元素有x軸與y軸,水與垂直地軸線,x軸與y軸刻度,刻度標(biāo)示坐標(biāo)軸地分隔,包括最小刻度與最大刻度,x軸與y軸刻度標(biāo)簽,表示特定坐標(biāo)軸地值,繪圖區(qū)域與實(shí)際繪圖地區(qū)域。Matplotlib所繪制地圖表地每個(gè)繪圖元素,例如,線條Line二D,文字Text,刻度等在內(nèi)存都有一個(gè)對(duì)象與之對(duì)應(yīng)。為了方便快速繪圖,Matplotlib通過pyplot模塊提供了一套與MATLAB類似地繪圖API,將眾多繪圖對(duì)象所構(gòu)成地復(fù)雜結(jié)構(gòu)隱藏在API內(nèi)部。Seaborn基于Matplotlib提供內(nèi)置主題,顏色調(diào)色板,函數(shù),可視化單變量,雙變量與線回歸等工具,使作圖變得更加容易。桌面可視化技術(shù)OLAP可視化工具一．OracleBIOracleBIDataVisualizationDesktop具備可視,自助,簡(jiǎn)單,快速,智能,多樣地特,為用戶提供個(gè)桌面應(yīng)用程序,以便用戶能夠訪問,探索,融合與分享數(shù)據(jù)可視化。OracleBI有著豐富地可視化組件,可實(shí)現(xiàn)對(duì)顏色,尺寸,外形地創(chuàng)新使用模式以及多種坐標(biāo)系統(tǒng)。并通過Html五行渲染,還可以選擇或制作個(gè)化地色系。OracleBI新增了列表,行坐標(biāo),時(shí)間軸,與弦圖,循環(huán)網(wǎng)絡(luò),網(wǎng)絡(luò),?；c樹圖等。OracleBI對(duì)大多數(shù)數(shù)據(jù)通過可視化方式行整理,轉(zhuǎn)換操作?？稍诿姘迮c分析注釋之間自由切換,為用戶提供友好地?cái)?shù)據(jù)源頁面,還提供打印面板與分析注釋頁面;支持導(dǎo)出為PDF與PowerPoint格式。OracleBI向用戶提供數(shù)據(jù)模式地自動(dòng)檢測(cè),能更好地幫助用戶了解數(shù)據(jù)及完成數(shù)據(jù)可視化。OLAP可視化工具二．微軟PowerBI微軟PowerBI是一套商業(yè)分析工具,可連接數(shù)百個(gè)數(shù)據(jù)源,簡(jiǎn)化了數(shù)據(jù)準(zhǔn)備流程并提供即席分析功能。MicrosoftExcel在很早以前就支持了數(shù)據(jù)透視表,并基于Excel開發(fā)了有關(guān)地BI插件,如用于數(shù)據(jù)獲取與數(shù)據(jù)整理地PowerQuery,用于建模分析PowerPrivot,圖表互工具PowerView與基于地圖地?cái)?shù)據(jù)可視化工具PowerMap等。相比于其它同類產(chǎn)品,它有著無可比擬地天然優(yōu)勢(shì)。熟悉Excel報(bào)表與BI分析地用戶可以快速上手,甚至可以直接使用以前地模型。PowerBI已經(jīng)支持包括Excel,CSV,XML,Json,文本文件等多種文件數(shù)據(jù)源及常見Access,MSSQL,Oracle,Mysql等關(guān)系數(shù)據(jù)庫。三．SuperSetSuperSet是一款開源地OLAP及數(shù)據(jù)可視化前端工具,是由知名在線房屋短租公司Airbnb公司開源地一款數(shù)據(jù)探索及數(shù)據(jù)可視化工具。SuperSet底層使用Python開發(fā),整個(gè)項(xiàng)目地后端使用了Flask,Pandas與SQLAlchemy,其,Pandas用于分析,SQLAlchemy作為數(shù)據(jù)庫地ORM,FlaskAppBuilder用作鑒權(quán),規(guī)則及數(shù)據(jù)庫事物操作。SuperSet支持地?cái)?shù)據(jù)源有:MySQL,Postgres,Presto,Oracle,sqlite,Redshift,MSSQL以及Druid。SuperSet可以支持十幾種可視化圖表,用于將查詢返回地?cái)?shù)據(jù)做可視化展示,但是其可視化目前只支持每次可視化一張表,不支持join連接,且過于依賴數(shù)據(jù)庫地快速響應(yīng),詳見六.四節(jié)。OLAP可視化工具Web可視化技術(shù)一．FlexFlex用于構(gòu)建與部署基于AdobeFlash地跨臺(tái)互聯(lián)網(wǎng)應(yīng)用程序。Flex允許在所有主流地瀏覽器,桌面,智能手機(jī),板電腦與智能電視一致地部署應(yīng)用。其目地是更快,更簡(jiǎn)單地開發(fā)富互聯(lián)網(wǎng)應(yīng)用程序（RichInterApplication,RIA）。Flex地基本架構(gòu)包括四個(gè)部分:AdobeSDK,AdobeFlexCharting,AdobeFlexDataServices與AdobeFlexBuilder。Flex能讓開發(fā)者在無需學(xué)Flash情況下,直接行FlashRIA編程。Flex采用GUI開發(fā),使用MXML或ActionScritp。MXML是用來描述用戶界面地遵循W三CXML標(biāo)準(zhǔn)地語言,可以使用任何文本編輯器行編寫。Flex具有多種組件,主要包括控件,容器與圖表,它們具備地同特征包含了尺寸,,樣式,行為與皮膚。通過組件可實(shí)現(xiàn)WebServices,遠(yuǎn)程對(duì)象,DragandDrop,列排序,圖表等功能;FLEX內(nèi)建了動(dòng)畫效果與其它地簡(jiǎn)單互動(dòng)界面等內(nèi)容。Flex地優(yōu)勢(shì)是源于AdobeFlash,能做出其它應(yīng)用無法完成地可視化效果。Web可視化技術(shù)二．SilverlightMicrosoftSilverlight是一個(gè)跨瀏覽器跨臺(tái)地插件,為網(wǎng)絡(luò)帶來了下一代基于.Framework地媒體體驗(yàn)與RIA應(yīng)用程序。對(duì)開發(fā)設(shè)計(jì)員而言,Silverlight是一種融合了微軟地多種技術(shù)地Web呈現(xiàn)技術(shù),提供了一套開發(fā)框架,通過使用基于向量地圖層技術(shù),支持任何尺寸圖像,并與Web開發(fā)環(huán)境實(shí)現(xiàn)了無縫連接。Silverlight不僅允許元素與內(nèi)容地適應(yīng),提供預(yù)制控件等;而且還可以輕松地創(chuàng)建圖形,然后使用它們?nèi)プ远x控件,如滾動(dòng)條樣式等。對(duì)每個(gè)控件Silverlight都提供了相應(yīng)地模板,可以在不必修改任何代碼地情況下改變控件地布局與外觀。三．JavaScript可視化技術(shù)基于JavaScript地可視化技術(shù)是軟件工程師地利器。常見地JavaScript數(shù)據(jù)可視化工具有ECharts,FushionCarts,Dgraphs,Datawrapper,GoogleCharts,HighCharts與D三.js等。（一）D三.jsD三（DataDrivenDocuments）是支持SVG渲染地一種JavaScript庫。D三提供了各種簡(jiǎn)單易用地函數(shù),大大簡(jiǎn)化了JavaScript操作數(shù)據(jù)地難度。由于它本質(zhì)上是JavaScript,因此,使用JavaScript也可以實(shí)現(xiàn)所有功能,但它能大大減少數(shù)據(jù)可視化編碼地工作量。D三已經(jīng)將生成可視化地復(fù)雜步驟精簡(jiǎn)到了幾個(gè)簡(jiǎn)單地函數(shù),用戶只需要輸入幾個(gè)簡(jiǎn)單地?cái)?shù)據(jù),就能夠?qū)?shù)據(jù)轉(zhuǎn)換為各種絢麗地圖形。D三還提供了大量地除線圖與條形圖之外地復(fù)雜圖表樣式,例如,Voronoi圖,樹形圖,圓形集群與單詞云等。Web可視化技術(shù)（二）HighchartsHighcharts是一個(gè)功能強(qiáng)大,開源,美觀,圖表豐富,兼容絕大多數(shù)瀏覽器地純JS圖表庫。目前支持直線圖,曲線圖,面積圖,曲線面積圖,面積范圍圖,曲線面積范圍圖,柱狀圖,柱狀范圍圖,條形圖,餅圖,散點(diǎn)圖,箱線圖,氣泡圖,誤差線圖,漏斗圖,儀表圖,瀑布圖與雷達(dá)圖一八種類型圖表,其,很多圖表可以集成在同一個(gè)圖形形成綜合圖。Highcharts基于jQuery框架開發(fā),所以需要在頁面引入jQuery,它能夠很方便快捷地在Web網(wǎng)站或Web應(yīng)用程序添加有互地圖表,并且免費(fèi)提供給個(gè)學(xué),個(gè)網(wǎng)站與非商業(yè)用途使用。對(duì)需要比較地?cái)?shù)據(jù),Highcharts提供了多軸支持,并且可以針對(duì)每個(gè)軸設(shè)置其位置,文字與樣式等屬。它能夠很便捷地在Web網(wǎng)站或Web應(yīng)用添加互地圖表,并在創(chuàng)建圖表后對(duì)圖表地任意點(diǎn),線與文字等行增加,刪除與修改操作。結(jié)合jQuery,MooTools,Prototype等JavaScript框架提供地Ajax接口,可以實(shí)時(shí)地從服務(wù)器取得數(shù)據(jù)并實(shí)時(shí)刷新圖表。Highcharts支持JS數(shù)組,JSON文件,JSON對(duì)象與表格數(shù)據(jù)等多種數(shù)據(jù)形式。Web可視化技術(shù)（三）EChartsECharts是百度公司開發(fā)地開源數(shù)據(jù)報(bào)表插件,也是一個(gè)純JavaScript地圖表庫,可以流暢地運(yùn)行在PC與移動(dòng)設(shè)備上,兼容當(dāng)前絕大部分瀏覽器（如IE八/九/一零/一一,Chrome,Firefox,Safari等）,底層依賴輕量級(jí)地Canvas類庫ZRender,提供直觀,生動(dòng),可互,可高度個(gè)化定制地?cái)?shù)據(jù)可視化圖表。ECharts三除了提供了常規(guī)地折線圖,柱狀圖,散點(diǎn)圖,餅圖,K線圖,盒形圖,熱力圖,線圖外,還提供了用于地理數(shù)據(jù)可視化地地圖,用于關(guān)系數(shù)據(jù)可視化地關(guān)系圖,用于BI地漏斗圖,儀表盤等,并且支持圖與圖之間地混搭。百度公司發(fā)布ECharts之后得到了業(yè)界地認(rèn)可與好評(píng),成為數(shù)據(jù)可視化領(lǐng)域地?zé)衢T報(bào)表框架,并入選了二零一三年產(chǎn)開源軟件一零大年度熱門項(xiàng)目。電視臺(tái)還曾通過百度地圖地?cái)?shù)據(jù)可視化定位功能來播報(bào)內(nèi)春節(jié)期間地口遷徙情況。Web可視化技術(shù)目錄23數(shù)據(jù)可視化概述數(shù)據(jù)可視化工具可視化組件與Echarts示例與大數(shù)據(jù)臺(tái)集成題ECharts使用準(zhǔn)備由于ECharts可視化基于JavaScript語言,因此讀者掌握一定JavaScript語言地基本知識(shí)將有助于對(duì)本節(jié)內(nèi)容地學(xué)。對(duì)JavaScript不熟悉地讀者,可以訪問JavaScript在線教程行學(xué)。一．獲取ECharts為了使用ECharts行數(shù)據(jù)可視化,需要先獲取ECharts。獲取方式有以下四種。（一）根據(jù)開發(fā)者功能與大小上地不同需求,從官網(wǎng)下載界面選擇需要地版本行下載。如果對(duì)文件大小沒有要求,可以直接下載完整版本;開發(fā)環(huán)境建議下載源代碼版本,該版本包含了常見地錯(cuò)誤提示與警告。（二）在ECharts地GitHub上下載最新地release版本,在解壓出來地文件夾里地dist目錄里找到最新版本地ECharts庫。（三）通過npm獲取ECharts。（四）cdn引入,可以在cdnjs,npmcdn或者內(nèi)地bootcdn上找到ECharts地最新版本。二．引入ECharts只需要像普通地JavaScript庫一樣用script標(biāo)簽引入,如下述代碼第五行。一.<!DOCTYPEhtml>二.<html>三.<head>四.<metacharset="utf-八">五.<scriptsrc="echarts.min.js"></script>六.</head>七.</html>三．圖表繪制獲取并引用ECharts后,還需要為ECharts準(zhǔn)備一個(gè)具備高度與寬度地DOM容器,例如要獲取一個(gè)寬度為八零零px,高度為四零零px地容器。一.<body>二.<divid="a"style="width:八零零px;height:四零零px;"></div>三.</body>然后就可以通過echarts.init方法初始化一個(gè)Echarts實(shí)例并通過setOption方法生成一個(gè)需要地示例。ECharts使用準(zhǔn)備使用ECharts,可以對(duì)數(shù)據(jù)行不同形式地可視化處理,使用YouTube數(shù)據(jù)集可以展現(xiàn)出一些常見地?cái)?shù)據(jù)可視化實(shí)例。一．柱狀圖柱狀圖,是一種以長(zhǎng)方形地長(zhǎng)度為變量地表達(dá)圖形地統(tǒng)計(jì)報(bào)告圖,由一系列高度不等地縱向紋理矩形表示數(shù)據(jù)分布,主要用來比較兩個(gè)或以上地不同時(shí)間或者不同條件值。柱狀圖也可橫向排列,或用多維方式表達(dá)。柱狀圖簡(jiǎn)單明了且容易理解,主要反映數(shù)據(jù)地分布差異。可以使用series[i]-bar在ECharts實(shí)現(xiàn)柱狀圖,ECharts柱狀圖是通過柱形地高度來表現(xiàn)數(shù)據(jù)地大小,柱狀圖可以應(yīng)用在直角坐標(biāo)系上,該直角坐標(biāo)系至少需要有一個(gè)類目軸或時(shí)間軸。下圖用柱狀圖實(shí)例展示了在YouTube數(shù)據(jù)集不同視頻類別數(shù)量地對(duì)比。Echarts示例（柱狀圖）Echarts示例（柱狀圖）YouTube數(shù)據(jù)集地柱狀圖示例用柱狀圖可視化不同類型視頻分布地代碼如下:一.<!DOCTYPEhtml>二.<htmllang="en">三.<head>四.<metacharset="UTF-八">五.<title>YouTube數(shù)據(jù)集條形圖示例</title>六.<styletype="text/css">七.#a{八.width:八零零px;九.height:四零零px;一零.background:#ccc;一一.}一二.</style>一三.</head>一四.<body>一五.<divid="a"></div>一六.<button>點(diǎn)擊查看YouTube數(shù)據(jù)集柱狀圖</button>一七.//JS文件引入一八.<scripttype="text/javascript"src="/javascripts/ajax-一.零.js"></script>一九.<scripttype="text/javascript"src="/javascripts/echarts.js"></script>二零.<scripttype="text/javascript">二一.//初始化操作二二.varmyChart=echarts.init(document.getElementById('a'));二三.varbtn=document.querySelector('button');二四.//以單擊按鈕響應(yīng)函數(shù)展現(xiàn)頁面二五.btn.onclick=function(){二六.//通過Ajax請(qǐng)求數(shù)據(jù):二七.Ajax('JSON').get('/show-data',function(data){二八.//數(shù)組聲明用于接收數(shù)據(jù):二九.//d一接收視頻類型三零.vard一=[];三一.//d二接收上傳數(shù)量三二.vard二=[];三三.//接收數(shù)據(jù)存放在d一:三四.for(vara=零;a<data.length;a++){三五.d一.push(三六.data[a].type三七.);三八.}三九.//接收數(shù)據(jù)存放在d二:四零.for(vara=零;a<data.length;a++){四一.d二.push(四二.data[a].times四三.);四四.}四五.//指定圖表配置項(xiàng)與有關(guān)數(shù)據(jù)四六.varoption={四七.//標(biāo)題四八.title:{四九.text:'使用YouTube數(shù)據(jù)集'五零.},五一.//提示框五二.tooltip:{},五三.//圖例五四.legend:{五五.data:['各類型視頻上傳數(shù)量']五六.},五七.xAxis:{五八.data:d一,五九.axisLabel:{Echarts示例（柱狀圖）六零.interval:零,六一.//數(shù)據(jù)名稱過長(zhǎng)采用rotate將數(shù)據(jù)類型名以其數(shù)值角度傾斜六二.rotate:-二零,六三.}六四.},六五.yAxis:{},六六.series:[{六七.name:'各類型視頻上傳數(shù)量',六八.//展現(xiàn)類型為柱狀圖六九.type:'bar',七零.data:d二七一.}]七二.};七三.//使用剛指定地配置項(xiàng)與數(shù)據(jù)顯示圖表。七四.myChart.setOption(option);七五.});七六.}七七.</script>七八.</body>七九.</html>Echarts示例（柱狀圖）第七～一一行定義CSSid屬"a",并在第一五行<divid="a"></div>使用這個(gè)id屬。第一九行引入echart.js;第二零～七八行引入繪制柱狀圖地JavaScript代碼。第二二行初始化在第一五行設(shè)置地繪圖區(qū)域,為后續(xù)繪制做準(zhǔn)備。第二五行給單擊按鈕增加回調(diào)函數(shù)。第二七～四三行通過Ajax地get方法請(qǐng)求JSON數(shù)據(jù),并解析存儲(chǔ)在兩個(gè)數(shù)組;本實(shí)例獲取地JSON數(shù)據(jù)如下所示,其type為視頻類型,times為各類型視頻地上傳數(shù)量。{"type":"UNA","times":三二},{"type":"Autos&Vehicles","times":七七},{"type":"edy","times":四一四},{"type":"Education","times":六五},{"type":"Entertainment","times":九零八},{"type":"Film&Animation","times":二六零},{"type":"Howto&Style","times":一三七},{"type":"Music","times":八六二},{"type":"News&Politics","times":三三三},{"type":"Nonprofits&Activism","times":四二},{"type":"People&Blogs","times":三九八},{"type":"Pets&Animals","times":九四},{"type":"Science&Technology","times":八零},{"type":"Sports","times":二五一},{"type":"Travel&Events","times":一一二}Echarts示例（柱狀圖）第四六～七三行,設(shè)置繪制柱狀圖地屬,并在第七五行通過setOpetion方法傳遞給在第二二行已經(jīng)初始化地myChart對(duì)象,Echarts將完成圖表地繪制。以上繪制過程基本是所有Echarts繪圖地通用過程,不同圖地類型及數(shù)據(jù)地設(shè)置在第四六～七三行定義地option對(duì)象。第四六～七三行聲明地option對(duì)象包括title,tooltip,legend,xAxis,yAxis等屬,這些屬以鍵值對(duì)地形式表示,值也是一個(gè)對(duì)象;多個(gè)鍵值對(duì)之間用逗號(hào)分開。xAxis,yAxis與series設(shè)置是圖表地關(guān)鍵。在xAxis屬設(shè)置x軸地?cái)?shù)據(jù)以及標(biāo)簽顯示屬。series描述了在設(shè)置好地x軸與y軸約束地面上繪制圖形數(shù)據(jù)。series地值是一個(gè)對(duì)象數(shù)組,對(duì)象與對(duì)象之間用都逗號(hào)分開;需要數(shù)字每個(gè)元素指定數(shù)據(jù)（第七零行）與繪圖類型為'bar'（第六九行）。在此例series數(shù)字只有一個(gè)對(duì)象元素,是繪制d二指定地柱狀圖。若此處指定多個(gè)對(duì)象,則在x軸指定數(shù)據(jù)標(biāo)簽上可以繪制多組數(shù)據(jù),并且可以為它們指定不同繪圖類型。Echarts示例（柱狀圖）二．折線圖折線圖是用折線顯示隨某一變量（例如時(shí)間）而變化地連續(xù)數(shù)據(jù)地圖例。非常適用于顯示在相等時(shí)間間隔下數(shù)據(jù)地趨勢(shì)變化,尤其是那些趨勢(shì)比單個(gè)數(shù)據(jù)點(diǎn)更重要,需要多個(gè)二維數(shù)據(jù)集地比較地場(chǎng)合。在ECharts給option對(duì)象series屬元素對(duì)象地type屬設(shè)置為"line"用于表示ECharts圖表地折線/面積圖,折線/面積圖是用折線將各個(gè)數(shù)據(jù)點(diǎn)標(biāo)志連接起來地圖表,在ECharts直角坐標(biāo)系與極坐標(biāo)系上地使用較為廣泛。比較不同類別視頻地上傳時(shí)間與上傳數(shù)量地關(guān)系時(shí),可以使用折線圖實(shí)現(xiàn)（見下圖）。Echarts示例（折線圖）Echarts示例（折線圖）YouTube數(shù)據(jù)集娛樂類視頻隨時(shí)間變化地?cái)?shù)量地折線圖繪制折線圖地代碼與繪制柱狀圖地代碼類似,請(qǐng)求服務(wù)器端show-data二數(shù)據(jù),數(shù)據(jù)格式為:{"age":"二零零-四零零","sum":九,"sum二":五五,"sum三":一二三},{"age":"四零零-六零零","sum":四七,"sum二":一六六,"sum三":三八八},{"age":"六零零-八零零","sum":一三四,"sum二":二八九,"sum三":五五五},{"age":"八零零-一零零零","sum":一九零,"sum二":五二二,"sum三":六九八},{"age":"一零零零-一二零零","sum":五二九,"sum二":六九九,"sum三":九九九}其age地值作為橫坐標(biāo)展現(xiàn)在x軸上,sum,sum二,sum三分別表示三種類型地視頻地上傳數(shù)量。將x軸與y軸數(shù)據(jù)分別存儲(chǔ)在對(duì)象d一,d二,d三與d四。option設(shè)置代碼如下:一.varoption={二.tooltip:{三.//trigger為axis時(shí)顯示該列下所有坐標(biāo)軸所對(duì)應(yīng)地?cái)?shù)據(jù)四.trigger:'axis'五.},六.legend:{七.data:['娛樂類視頻上傳歷史時(shí)間與數(shù)量關(guān)系圖']八.},九.xAxis:[一零.{Echarts示例（折線圖）一一.Name:'視頻上傳數(shù)',一二.data:d一一三.}一四.],一五.yAxis:[一六.{一七.Name:'上傳歷史時(shí)間',一八.type:'value'一九.}二零.],二一.series:[二二.{二三.name:'運(yùn)動(dòng)類',二四.//數(shù)據(jù)展現(xiàn)形式為折線圖二五.type:'line',二六.data:d二二七.},二八.{二九.name:'音樂類',三零.type:'line',三一.data:d三三二.}三三.{三四.name:'娛樂類',三五.type:'line',三六.data:d四三七.}三八.三九.]四零.};

與柱狀圖地關(guān)鍵區(qū)別在第二五行,series第一個(gè)元素type屬設(shè)置為'line'。本示例繪制了三種類型視頻地上傳數(shù)與上傳歷史時(shí)間關(guān)系,在option設(shè)置提示框tooltip地觸發(fā)方式為'axis',,即坐標(biāo)軸觸發(fā)。橫坐標(biāo)xAxis設(shè)置為視頻地上傳歷史時(shí)間,縱坐標(biāo)yAxis設(shè)置為視頻地上傳數(shù)。series地?cái)?shù)據(jù)為三種不同類型地視頻（第二二～三七行）。Echarts示例（折線圖）三．餅狀圖,通過將圓形劃分成幾個(gè)扇形,來描述數(shù)量或百分比地關(guān)系,扇形地大小與數(shù)量地大小成比例,所有扇形正好組成一個(gè)完整地圓。餅狀圖適用簡(jiǎn)單地占比圖,且在不要求數(shù)據(jù)精細(xì)地情況適用,尤其適合渠道來源等場(chǎng)景。對(duì)于YouTube數(shù)據(jù)集,可以使用餅狀圖直觀地看出視頻類型與對(duì)應(yīng)評(píng)論數(shù)之間地關(guān)系,如下圖所示。Echarts示例（餅狀圖）Echarts示例（餅狀圖）YouTube數(shù)據(jù)集餅狀圖示例Option對(duì)象屬設(shè)置代碼如下。一.option={二.title:{三.text:'YouTube數(shù)據(jù)集餅狀圖示例',四.x:'center'五.},六.tooltip:{七.trigger:'item',八.},九.legend:{一零.//圖例布局方式默認(rèn)為水這里由于統(tǒng)計(jì)項(xiàng)較多選擇垂直顯示一一.orient:'vertical',一二.//將圖例放在左側(cè)顯示一三.left:'left',一四.//圖例數(shù)據(jù)data:d一一六.},一七.series:[一八.{一九.name:'YouTube類型評(píng)論數(shù)關(guān)系',二零.//選取圖例為餅狀圖二一.type:'pie',二二.//設(shè)置餅狀圖地大小二三.radius:'五零%',二四.//設(shè)置餅狀圖顯示位置二五.center:['五零%','五零%'],二六.//將獲取地?cái)?shù)據(jù)放在data二七.data:d二,二八.}二九.]三零.};Echarts示例（餅狀圖）餅圖不需要設(shè)置xAxis與yAxis屬,但legend屬則特別重要,根據(jù)數(shù)據(jù)項(xiàng)地?cái)?shù)量,選擇不同圖例放置地位置以便體現(xiàn)圖例地美觀。第九～一六行為legend設(shè)置,其data屬設(shè)置為獲取地?cái)?shù)據(jù)d一,d一為數(shù)據(jù)地name字段對(duì)應(yīng)值,作為圖例數(shù)據(jù)顯示。為了方便使用接收地?cái)?shù)據(jù)我們可以自定義數(shù)組行接收d一,后面用到地d二同樣可以采用類似得到方法完成。在seriesdata設(shè)置為d二,其每一個(gè)數(shù)據(jù)項(xiàng)包含了一個(gè)value屬與一個(gè)name屬,value為對(duì)應(yīng)類型視頻地評(píng)論數(shù),name為視頻地類型名稱,數(shù)據(jù)格式如下所示。{"value":一三二零六,"name":"UNA"},{"value":二五三四,"name":"Autos&Vehicles"},{"value":三一八六零二,"name":"edy"},{"value":四七二四,"name":"Education"},{"value":七三七零二三,"name":"Entertainment"},{"value":一零一三四六,"name":"Film&Animation"},{"value":一二五九四八,"name":"Howto&Style"},{"value":一二二二四四四,"name":"Music"},{"value":一四一八四零,"name":"News&Politics"},{"value":三六六零,"name":"Nonprofits&Activism"},{"value":一一零四三九,"name":"Pets&Animals"},{"value":二二零八七八,"name":"People&Blogs"},{"value":七三五八零,"name":"Science&Technology"},{"value":八六二七二,"name":"Sports"},{"value":五一五三四,"name":"Travel&Events"}在柱狀圖與折線圖,將其設(shè)置在xAxis對(duì)象。對(duì)于餅狀圖,在series屬設(shè)置第一個(gè)對(duì)象地type為pie,數(shù)據(jù)設(shè)置為接收地對(duì)應(yīng)數(shù)據(jù),以及半徑,原點(diǎn)地值。其它部分與柱狀圖與折線圖類似。Echarts示例（餅狀圖）四．散點(diǎn)圖散點(diǎn)圖適用于顯示若干數(shù)據(jù)系列各數(shù)值之間地關(guān)系,類似xy軸,判斷兩變量之間是否存在某種關(guān)聯(lián)。其優(yōu)勢(shì)在于處理數(shù)值地分布與數(shù)據(jù)點(diǎn)地分簇。如果數(shù)據(jù)集包含非常多地點(diǎn),那么散點(diǎn)圖便是最佳圖表類型,但散點(diǎn)圖顯示多個(gè)序列看上去非?；靵y。如果需要查看YouTube每種視頻地評(píng)論數(shù)與評(píng)分關(guān)系時(shí)可以使用散點(diǎn)圖,并把散點(diǎn)半徑設(shè)定為觀看數(shù)量,如下圖所示。可以看出似乎視頻地觀看數(shù)量多地不一定是評(píng)分高與評(píng)論數(shù)多地。Echarts示例（散點(diǎn)圖）Echarts示例（散點(diǎn)圖）YouTube數(shù)據(jù)集地評(píng)論數(shù)與評(píng)分關(guān)系散點(diǎn)圖實(shí)現(xiàn)地關(guān)鍵代碼如下:一.btn.onclick=function(){二.//通過Ajax請(qǐng)求數(shù)據(jù):三.Ajax('JSON').get('/show-data四',function(data){四.option={五.title:{六.text:'YouTube評(píng)論與評(píng)分關(guān)系',七.x:'center‘八.},九.xAxis:{一零.},一一.yAxis:{一二.},一三.series:[{一四.data:data,一五.//圖表類型為散點(diǎn)圖一六.type:'scatter',一七.symbolSize:function(data){一八.//控制散點(diǎn)大小使其完整地展現(xiàn)于用戶眼前一九.returnMath.sqrt(data[二])/一e二;二零.},二一.//鼠標(biāo)懸停標(biāo)簽二二.label:{二三.emphasis:{二四.show:true,二五.formatter:function(youtubedata){Echarts示例（散點(diǎn)圖）二六.//返回值設(shè)定為視頻類型二七.returnyoutubedata.data[三];二八.},二九.//在散點(diǎn)上方顯示標(biāo)簽三零.position:'top‘三一.}三二.},三三.},]三四.};三五.//使用指定地配置項(xiàng)與數(shù)據(jù)顯示圖表。三六.myChart.setOption(option);三七.});三八.}本示例我們使用Ajax地get方法（第三行）從show-data四取回地?cái)?shù)據(jù)有四列,接收到地?cái)?shù)據(jù)格式形式如下所示:[八四五,五一二,一七六二三六八,"Autos&Vehicles"] 對(duì)于每一個(gè)數(shù)據(jù):數(shù)據(jù)第一項(xiàng)為評(píng)論數(shù),第二項(xiàng)為評(píng)分?jǐn)?shù),第三項(xiàng)為觀看數(shù),最后一項(xiàng)為視頻類型。第一六行type設(shè)置為'scatter',第一七～一九行設(shè)置散點(diǎn)半徑,其一e二代表將數(shù)據(jù)值縮小為原數(shù)據(jù)值一一一零零從而達(dá)到控制散點(diǎn)大小地效果。第二二～三二行為散點(diǎn)圖增加鼠標(biāo)懸停標(biāo)簽,這里主要設(shè)置了散點(diǎn)對(duì)應(yīng)地視頻類型（第二七行）與標(biāo)簽地顯示位置為top（第三零行）。第三六～三八行使用myChart.setOption（option）完成圖例地顯示。Echarts示例（散點(diǎn)圖）五．熱力圖熱力圖以特殊高亮地形式顯示訪客熱衷訪問地頁面區(qū)域與訪客所在地地理區(qū)域地圖示。熱力圖可以顯示不可點(diǎn)擊區(qū)域發(fā)生地。可以使用熱力圖查看YouTube數(shù)據(jù)集各類型視頻觀看量排名前三地視頻地評(píng)論數(shù)關(guān)系,如下圖所示。Echarts示例（熱力圖）Echarts示例（熱力圖）YouTube數(shù)據(jù)集地?zé)崃D示例核心代碼如下。一. btn.onclick=function(){二. //通過Ajax請(qǐng)求數(shù)據(jù):三. Ajax('JSON').get('/show-data五',function(data){四. console.log(data[零][零]);五.//數(shù)組聲明用于接收數(shù)據(jù):六.vartype=[];七.varrank=[];八.//接收y軸數(shù)據(jù):九.for(vara=零;a<data[一].length;a++){一零.type.push(一一.data[一][a]一二.);一三.}一四.//接收x軸數(shù)據(jù):一五.for(vara=零;a<data[二].length;a++){一六.rank.push(一七.data[二][a]一八.);一九.}二零.//指定圖表配置項(xiàng)與有關(guān)數(shù)據(jù)二一. data=data[零].map(function(item){二二.return[item[一],item[零],item[二]||'-'];二三.});二四.option={二五.title:{二六.//視圖標(biāo)題text:'YouTube數(shù)據(jù)熱力圖示例',二八.x:'center'二九.三零.animation:false,三一.grid:{三二.height:'五零%',三三.y:'一零%'三四.},三五.//橫坐標(biāo)顯示數(shù)據(jù)三六.xAxis:{三七.data:rank,三八.},三九.//縱坐標(biāo)顯示數(shù)據(jù)四零.yAxis:{四一.data:type,四二.},四三.//視覺映射器設(shè)置四四.visualMap:{四五.min:零,四六.max:五零零零零,四七.calculable:true,四八.orient:'horizontal',四九.left:'center',五零.bottom:'二五%'Echarts示例（熱力圖）五一.},五二.series:[{五三.//圖表類型為熱力圖五四.type:'heatmap',五五.data:data,五六.label:{五七.normal:{五八.show:true五九.}六零.},六一.}]六二.};六三.//使用剛指定地配置項(xiàng)與數(shù)據(jù)顯示圖表。六四.myChart.setOption(option);六五. });六六. }Echarts示例（熱力圖）在option對(duì)象指定xAxis與yAxis地屬與數(shù)據(jù),第五九行設(shè)置type為'heatmap'。請(qǐng)注意查詢數(shù)據(jù)類型。在熱力圖通常需要設(shè)置一個(gè)視覺映射器visualMap反應(yīng)數(shù)值范圍對(duì)應(yīng)地?zé)嶂猿潭?顏色由淺到深,數(shù)值有小到大,本示例地視覺映射器為第四四～五一行,設(shè)置最小值為零,最大值為五零零零零,可計(jì)算為true,顏色默認(rèn)為黃色到紅色,位置為底部心水顯示。本示例獲取地?cái)?shù)據(jù)可以分為三個(gè)部分,分別對(duì)應(yīng)x軸顯示數(shù)據(jù),y軸顯示數(shù)據(jù)與熱力圖主體部分?jǐn)?shù)據(jù)。x軸數(shù)據(jù)為視頻觀看量地排名:["觀看量第一名","觀看量第二名","觀看量第三名"]y軸數(shù)據(jù)為視頻類型:["UNA","Autos&Vehicles","edy","Education","Entertainment","Film&Animation","Howto&Style","Music","News&Politics","Nonprofits&Activism","People&Blogs","Pets&Animals","Science&Technology","Sports","Travel&Events"]Echarts示例（熱力圖）熱力圖主體部分地?cái)?shù)據(jù)為核心部分,數(shù)據(jù)地格式為:[[零,零,四八七],[零,一,一三二八],[零,二,六四八],[一,零,八四五],[一,一,四一四],[一,二,三三三],[二,零,三零六六六],[二,一,六九三八],[二,二,二九一六零],[三,零,八一六],[三,一,一二八九],[三,二,二五七],[四,零,二五九六八三],[四,一,一四二七四],[四,二,二二五六七],[五,零,五五零八],[五,一,四二三五],[五,二,五七二],[六,零,二九七八六],[六,一,六六零五],[六,二,五二八一],[七,零,五零零三六],[七,一,一七七三一],[七,二,一二九二零零],[八,零,一六四六],[八,一,四一六四],[八,二,六四零三],[九,零,一四九],[九,一,三四五],[九,二,五一],[一零,零,一七六零二],[一零,一,八八一],[一零,二,三九八三],[一一,零,二四零零四],[一一,一,三九四一八],[一一,二,一二零三四],[一二,零,六零九三],[一二,一,二五九八],[一二,二,一八五],[一三,零,一四六零二],[一三,一,一零四一],[一三,二,二三二],[一四,零,一九四六一],[一四,一,一八五二],[一四,二,二九九三]]對(duì)于x軸與y軸數(shù)據(jù)地顯示較為簡(jiǎn)單,可以使用數(shù)組接收后直接在xAxis與yAxis設(shè)置即可完成。對(duì)于熱力圖主體部分地?cái)?shù)據(jù)每一個(gè)數(shù)據(jù)項(xiàng)來說:前兩個(gè)數(shù)值決定了數(shù)據(jù)顯示位置,第三個(gè)數(shù)值表示觀看次數(shù)。例如,[二,零,三零六六六]表示類別為edy地視頻觀看量第一名地觀看數(shù)為三零六六六次。Echarts示例（熱力圖）六．?；鶊D?；鶊D,即?；芰糠至鲌D,也叫?；芰亢鈭D。它是一種特定類型地流程圖,圖延伸地分支地寬度對(duì)應(yīng)數(shù)據(jù)流量地大小,通常應(yīng)用于能源,材料成分,金融等數(shù)據(jù)地可視化分析?？梢允褂蒙；鶊D表示YouTube數(shù)據(jù)集地構(gòu)成,如下圖所示。Echarts示例（?；鶊D）Echarts示例（桑基圖）YouTube數(shù)據(jù)集?；鶊D示例核心代碼如下一.btn.onclick=function(){二.//通過Ajax請(qǐng)求數(shù)據(jù):三.Ajax('JSON').get('/show-data六',function(data){四.//獲取數(shù)據(jù)源名稱五.varmydata=data[零].name;六.option={七.title:{八.//視圖標(biāo)題九.text:'YouTube數(shù)據(jù)集構(gòu)成',一零.x:'left'一一.},一二.series:{一三.//圖表類型為桑基圖一四.type:'sankey',一五.layout:'none',一六.data:data,一七.//關(guān)聯(lián)數(shù)據(jù)一八.links:[{一九.source:mydata,二零.target:data[一].name,二一.value:一二二.},{二三.source:mydata,二四.target:data[二].name,二五.value:一二六.},{source:mydata,二八.target:data[三].name,value:一三零.},{三一.source:mydata,三二.target:data[四].name,三三.value:一三四.},{三五.source:mydata,三六.target:data[五].name,三七.value:一三八.},{三九.source:mydata,四零.target:data[六].name,四一.value:一四二.},{四三.source:mydata,四四.target:data[七].name,四五.value:一四六.},{四七.source:mydata,四八.target:data[八].name,四九.value:一五零.},{Echarts示例（?；鶊D）五一.source:mydata,五二.target:data[九].name,五三.value:一五四.},{五五.source:mydata,五六.target:data[一零].name,五七.value:一五八.}]五九.}六零.};六一.//使用剛指定地配置項(xiàng)與數(shù)據(jù)顯示圖表。六二.myChart.setOption(option);六三.});六四.}第三行使用Ajax地get方法獲取數(shù)據(jù),請(qǐng)求url為show-data六,使用桑基圖行數(shù)據(jù)展示。第一四行,在series地type屬設(shè)置為'sankey'。為了行數(shù)據(jù)關(guān)聯(lián)我們需要設(shè)置數(shù)據(jù)源,本示例在第五行獲取,其值為數(shù)據(jù)集結(jié)構(gòu),并在第一八～五八行行關(guān)聯(lián)數(shù)據(jù)。每一次關(guān)聯(lián)包含三個(gè)屬:source,target與value。其source為出發(fā)點(diǎn),target為目地,value為對(duì)應(yīng)數(shù)值。 本示例獲取地?cái)?shù)據(jù)格式為{"name":"數(shù)據(jù)集結(jié)構(gòu)"},name屬為桑基圖展示地各數(shù)據(jù)地名稱。Echarts示例（?；鶊D）七．雷達(dá)圖雷達(dá)圖,又稱為戴布拉圖,蜘蛛網(wǎng)圖。雷達(dá)圖適用于多維數(shù)據(jù)（四維以上）,且每個(gè)維度需要可以排序,可以用來了解公司各項(xiàng)數(shù)據(jù)指標(biāo)地變動(dòng)情形及其好壞趨向。它地劣勢(shì)為理解成本較高。為了直觀顯示出YouTube數(shù)據(jù)集不同類型視頻地各項(xiàng)數(shù)據(jù)地均值情況,可以選取雷達(dá)圖行數(shù)據(jù)可視化展示,如下圖所示。由下圖可以看出教育類視頻相比其它兩類視頻并不怎么受到熱捧。Echarts示例（雷達(dá)圖）Echarts示例（雷達(dá)圖）YouTube數(shù)據(jù)集雷達(dá)圖示例核心代碼如下。一.btn.onclick=function(){二.//通過Ajax請(qǐng)求數(shù)據(jù):三.Ajax('JSON').get('/show-data七',function(data){四.option={五.legend:{六.//垂直方式顯示七.orient:'vertical',八.//圖例位置九.padding:八零,一零.//將圖例放在左側(cè)顯示一一.left:'left',一二.data:['edy','Education','Entertainment']一三.},一四.radar:{一五.name:{一六.//文本樣式設(shè)置一七.textStyle:{一八.color:'#fff',一九.backgroundColor:'#九九九',二零.borderRadius:二,二一.padding:[二,三]二二.}二三.},二四.//指示器設(shè)置二五.indicator:[二六.{name:'上傳均間隔',max:一一零零},二七.{name:'視頻均長(zhǎng)度',max:二六零},二八.{name:'均觀看數(shù)',max:二二零零零零},二九.{name:'均率',max:四},三零.{name:'均評(píng)分',max:一零},三一.{name:'均評(píng)論數(shù)',max:一零零零}三二.]三三.},三四.series:[{三五.//樣式為雷達(dá)圖三六.type:'radar',三七.//使用YouTube數(shù)據(jù)集數(shù)據(jù)三八.data:data三九.}]四零.};四一.//使用剛指定地配置項(xiàng)與數(shù)據(jù)顯示圖表。四二.myChart.setOption(option);四三.});四四.}Echarts示例（雷達(dá)圖）第三行通過Ajax地get方法獲取數(shù)據(jù),請(qǐng)求url為show-dat。第五～一三行行圖例設(shè)置,包括圖例地顯示位置與數(shù)據(jù)。第一四～三三行行雷達(dá)圖地默認(rèn)配置,其indicator（第二五～三三行）是雷達(dá)圖特有地重要屬,作為指示器給出了數(shù)據(jù)地名稱與最大值,針對(duì)不同數(shù)據(jù)地取值范圍,可以選擇不同地max值使圖表更加直觀,從而更好地完成數(shù)據(jù)可視化。第三六行設(shè)置圖表類型為'radar',并在三八行使用獲取到地?cái)?shù)據(jù)data,本示例獲取地?cái)?shù)據(jù)格式為:{"value":[九三五,一九二,二一一六五四,三.五,九.三一,七六九],"name":"edy"}其value表示雷達(dá)圖各個(gè)屬地?cái)?shù)值,name表示對(duì)應(yīng)地視頻類型。即類型為edy地視頻地上傳均間隔為九三五s,視頻地均長(zhǎng)度為一九二s,視頻地均觀看數(shù)為二一一六五四次,視頻地均得分?jǐn)?shù)為九.三一分,視頻地均評(píng)論數(shù)為七六九個(gè)。Echarts示例（雷達(dá)圖）目錄58數(shù)據(jù)可視化概述數(shù)據(jù)可視化工具可視化組件與Echarts示例與大數(shù)據(jù)臺(tái)集成題與大數(shù)據(jù)臺(tái)集成在掌握了通過ECharts顯示圖標(biāo)方法后,我們需要通過web服務(wù)器與大數(shù)據(jù)臺(tái)對(duì)接,能夠通過web訪問大數(shù)據(jù)臺(tái)地分析結(jié)果。本節(jié)介紹如何通過Java調(diào)用Hive提供地API對(duì)Hive數(shù)據(jù)集行訪問與操