《數(shù)據(jù)可視化技術(shù)》 課件 09 使用動(dòng)態(tài)柱狀圖描繪各品牌手機(jī)銷(xiāo)售、10 電器產(chǎn)品營(yíng)銷(xiāo)數(shù)據(jù)異步加載和數(shù)據(jù)集管理

《數(shù)據(jù)可視化技術(shù)》單元9使用動(dòng)態(tài)柱狀圖描繪各品牌手機(jī)銷(xiāo)售項(xiàng)目介紹項(xiàng)目二：數(shù)碼產(chǎn)品銷(xiāo)售數(shù)據(jù)ECharts可視化數(shù)碼產(chǎn)品主要包括計(jì)算機(jī)、通信和消費(fèi)電子產(chǎn)品。對(duì)數(shù)碼產(chǎn)品銷(xiāo)售數(shù)據(jù)進(jìn)行分析和可視化展示，有助于相關(guān)人員了解各種產(chǎn)品銷(xiāo)售情況，了解哪些是暢銷(xiāo)產(chǎn)品、哪些是冷門(mén)產(chǎn)品，幫助改進(jìn)營(yíng)銷(xiāo)和投資。本項(xiàng)目使用ECharts技術(shù)完成對(duì)數(shù)碼產(chǎn)品銷(xiāo)售數(shù)據(jù)的分析與可視化。任務(wù)1使用基本組件繪制數(shù)碼產(chǎn)品銷(xiāo)量圖（已完成）任務(wù)2應(yīng)用直角坐標(biāo)軸圖描繪計(jì)算機(jī)銷(xiāo)量情況（已完成）任務(wù)3應(yīng)用非直角坐標(biāo)軸圖描繪手機(jī)經(jīng)營(yíng)狀況（已完成）任務(wù)4使用動(dòng)態(tài)柱狀圖描繪各品牌手機(jī)近期銷(xiāo)量01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)四使用動(dòng)態(tài)柱狀圖描繪各品牌手機(jī)近期銷(xiāo)量有時(shí)候?yàn)榱烁又庇^(guān)地描述業(yè)務(wù)發(fā)展情況，需要根據(jù)不同的日期（年份、季度、月份、周、日等）動(dòng)態(tài)顯示數(shù)據(jù)及其變化過(guò)程，這時(shí)可制作動(dòng)態(tài)數(shù)據(jù)圖表，其中常見(jiàn)的是動(dòng)態(tài)數(shù)據(jù)柱狀圖。本任務(wù)需要分析近幾年各品牌手機(jī)銷(xiāo)量情況，并用水平條柱動(dòng)態(tài)展示數(shù)據(jù)及其變化過(guò)程，從而對(duì)比分析銷(xiāo)量增長(zhǎng)或降低情況，了解各種品牌手機(jī)銷(xiāo)量排名，以及隨時(shí)間變化的發(fā)展趨勢(shì)。任務(wù)分解：子任務(wù)1基礎(chǔ)動(dòng)態(tài)柱狀圖子任務(wù)2繪制各品牌手機(jī)近期銷(xiāo)量動(dòng)態(tài)排序柱狀圖學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握基礎(chǔ)動(dòng)態(tài)圖表的繪制（2）掌握動(dòng)態(tài)排序柱狀圖的繪制2、技能（1）能夠繪制基礎(chǔ)動(dòng)態(tài)圖表和動(dòng)態(tài)排序柱狀圖3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)1

繪制各品牌手機(jī)近期銷(xiāo)量動(dòng)態(tài)排序柱狀圖任務(wù)分析：某手機(jī)專(zhuān)營(yíng)店對(duì)2021年各種品牌手機(jī)各個(gè)月份銷(xiāo)量進(jìn)行了統(tǒng)計(jì)，結(jié)果見(jiàn)表2-4-1。利用表2-4-1數(shù)據(jù)繪制動(dòng)態(tài)排序柱狀圖，首先顯示2021年各種品牌手機(jī)1月份銷(xiāo)量排序柱狀圖，然后逐步顯示后續(xù)月份銷(xiāo)量情況，每個(gè)月份數(shù)據(jù)在顯示時(shí)有停留，動(dòng)畫(huà)過(guò)渡流暢1．基礎(chǔ)動(dòng)態(tài)圖表任務(wù)資訊ECharts要實(shí)現(xiàn)動(dòng)畫(huà)非常容易，只需要賦予option參數(shù)不同的數(shù)據(jù)，并使用setOption更新即可。通常情況下用戶(hù)不需要設(shè)置如何使用動(dòng)畫(huà)，只需要更新數(shù)據(jù)，ECharts就會(huì)找出跟上一次數(shù)據(jù)之間的區(qū)別，自動(dòng)應(yīng)用最合適的過(guò)渡動(dòng)畫(huà)。要設(shè)置周期性更新數(shù)據(jù)，可以使用setInterval方法。setInterval是一個(gè)實(shí)現(xiàn)定時(shí)調(diào)用的方法，可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。setInterval方法會(huì)不停地調(diào)用函數(shù)，直到clearInterval被調(diào)用或窗口被關(guān)閉。語(yǔ)法格式如下：另外要在指定的時(shí)間后調(diào)用函數(shù)或計(jì)算表達(dá)式，可以使用setTimeout()。其語(yǔ)法格式如下1．基礎(chǔ)動(dòng)態(tài)圖表任務(wù)資訊簡(jiǎn)單的基礎(chǔ)動(dòng)態(tài)圖表主要代碼如下2．動(dòng)態(tài)排序柱狀圖任務(wù)資訊動(dòng)態(tài)排序柱狀圖是一種展示數(shù)據(jù)隨時(shí)間變化而變化的圖表，ECharts從版本5開(kāi)始提供內(nèi)置支持。動(dòng)態(tài)排序柱狀圖通常是橫向的柱條，也可以使用縱向的柱條，調(diào)換x軸和y軸的設(shè)置即可動(dòng)態(tài)排序柱狀圖通常會(huì)使用一些與動(dòng)態(tài)數(shù)據(jù)相關(guān)的參數(shù)，常見(jiàn)參數(shù)如下realtimeSort：通常設(shè)為true，表示開(kāi)啟該系列的動(dòng)態(tài)排序效果。yAxis.inverse：通常設(shè)為true，表示y軸從下往上是從小到大的排列。yAxis.animationDuration：建議設(shè)為300，表示第一次柱條排序動(dòng)畫(huà)的時(shí)長(zhǎng)，單位為毫秒yAxis.animationDurationUpdate：建議設(shè)為300，表示第一次之后柱條排序動(dòng)畫(huà)的時(shí)長(zhǎng)，單位為毫秒。yAxis.max：如果想只顯示前n名，將yAxis.max設(shè)為n-1，否則顯示所有柱條。xAxis.max：建議設(shè)為dataMax，表示用數(shù)據(jù)的最大值作為x軸最大值，視覺(jué)效果更好。series.label.valueAnimation：如果想要實(shí)時(shí)改變標(biāo)簽，需要將此參數(shù)設(shè)為true。animationDuration：動(dòng)畫(huà)持續(xù)時(shí)間，如果設(shè)為0，表示第一份數(shù)據(jù)不需要從0開(kāi)始動(dòng)畫(huà)（如果希望從0開(kāi)始則設(shè)為和animationDurationUpdate相同的值）。animationDurationUpdate：建議設(shè)為3000，單位為毫秒，表示每次更新動(dòng)畫(huà)的時(shí)長(zhǎng)，這一數(shù)值應(yīng)與調(diào)用setOption改變數(shù)據(jù)的頻率值相同，即以animationDurationUpdate的頻率調(diào)用setInterval更新數(shù)據(jù)值。2．動(dòng)態(tài)排序柱狀圖任務(wù)資訊一個(gè)簡(jiǎn)單的動(dòng)態(tài)排序柱狀圖，代碼如下任務(wù)實(shí)施ECharts最基本的代碼結(jié)構(gòu)引入js文件,DOM容器,初始化對(duì)象,設(shè)置optionOption設(shè)置：步驟：title設(shè)置了標(biāo)題居中顯示。tooltip觸發(fā)條件為item，提示內(nèi)容顯示格式為:{c}(5exj4er%)，代表數(shù)據(jù)項(xiàng)名稱(chēng)、利潤(rùn)值、利潤(rùn)占比。圖例設(shè)為垂直顯示，右對(duì)齊series中餅圖大小為網(wǎng)格的60%，data項(xiàng)記錄了各系列手機(jī)的名稱(chēng)（name）和利潤(rùn)（value）03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)拓展：創(chuàng)建動(dòng)態(tài)餅圖拓展任務(wù)某數(shù)碼專(zhuān)營(yíng)店準(zhǔn)備整理2020年—2022年業(yè)務(wù)經(jīng)營(yíng)情況，對(duì)所經(jīng)營(yíng)的耳麥、音響、鍵鼠（鍵盤(pán)和鼠標(biāo)的簡(jiǎn)稱(chēng)）、U盤(pán)、轉(zhuǎn)接線(xiàn)等產(chǎn)品的盈利數(shù)據(jù)進(jìn)行了統(tǒng)計(jì)，得到各類(lèi)產(chǎn)品盈利占比情況，見(jiàn)表2-5-1利用表2-5-1數(shù)據(jù)繪制動(dòng)態(tài)餅圖，分別顯示2020年、2021年和2022年各類(lèi)產(chǎn)品盈利占比情況，每年的餅圖數(shù)據(jù)暫停3s《數(shù)據(jù)可視化技術(shù)》課題10電器產(chǎn)品營(yíng)銷(xiāo)數(shù)據(jù)異步加載和數(shù)據(jù)集管理01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：電器產(chǎn)品營(yíng)銷(xiāo)數(shù)據(jù)的可視化分析：當(dāng)前電子商務(wù)普及，交易數(shù)據(jù)非常龐大。對(duì)電子商務(wù)數(shù)據(jù)通過(guò)可視化手段進(jìn)行分析和圖表展示，可以幫助銷(xiāo)售人員改進(jìn)銷(xiāo)售手段和策略，提高銷(xiāo)售量。本單元講解異步數(shù)據(jù)加載、數(shù)據(jù)集管理、數(shù)據(jù)映射。任務(wù)1、ECharts異步加載數(shù)據(jù)、加載json數(shù)據(jù)任務(wù)2、dataset數(shù)據(jù)集管理學(xué)習(xí)目標(biāo)1、知識(shí)（1）了解異步加載數(shù)據(jù)（2）掌握異步加載數(shù)據(jù)方法（3）理解數(shù)據(jù)集（4）掌握series.encode操作2、技能（1）能夠使用Echarts異步加載數(shù)據(jù)（2）能夠使用dataset進(jìn)行數(shù)據(jù)集管理（3）能夠使用series.encode映射數(shù)據(jù)3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)1

ECharts異步加載數(shù)據(jù)、加載json數(shù)據(jù)任務(wù)分析：本任務(wù)的主要內(nèi)容包括異步加載概念，jQuery加載文件方法，loading加載，使用異步加載數(shù)據(jù)開(kāi)發(fā)ECharts項(xiàng)目。1．異步加載概念2．jQuery加載文件方法3．使用異步加載數(shù)據(jù)開(kāi)發(fā)ECharts項(xiàng)目4．loading加載1．異步加載概念任務(wù)資訊異步數(shù)據(jù)加載就是在加載數(shù)據(jù)時(shí)仍然執(zhí)行其他程序，不會(huì)導(dǎo)致其他程序等待加載數(shù)據(jù)完后才執(zhí)行。一般對(duì)不夠重要的、數(shù)據(jù)量較大的圖表使用異步加載方式，這樣才不會(huì)因?yàn)閼?yīng)用程序界面空白、卡頓而影響用戶(hù)正常使用。默認(rèn)情況下JavaScript是同步加載的，也就是JavaScript的加載是阻塞的，后面的元素要等待JavaScript加載完畢后才能再加載2．jQuery加載文件方法任務(wù)資訊jQuery的$.get()方法就是一種異步加載文件的方法。jQuery是一個(gè)JavaScript庫(kù)。jQuery極大地簡(jiǎn)化了JavaScript編程。$就是jquery對(duì)象，$()就是jQuery()，在里面可以傳參數(shù)，作用就是獲取元素。jquery中$.，例如$.post()，$.get()，$.ajax()等這些都是jquery這個(gè)對(duì)象的方法。$.get()方法使用HTTPGET請(qǐng)求從服務(wù)器加載數(shù)據(jù)。任務(wù)實(shí)施1、ECharts異步加載數(shù)據(jù)ECharts通常數(shù)據(jù)設(shè)置在setOption中，如果我們需要異步加載數(shù)據(jù)，可以配合jQuery等工具，在異步獲取數(shù)據(jù)后通過(guò)setOption填入數(shù)據(jù)和配置項(xiàng)就行。創(chuàng)建json數(shù)據(jù)，名稱(chēng)為advertisement.json{“adv":[{"value":451,"name":"視頻廣告"},{"value":237,"name":"聯(lián)盟廣告"},{"value":159,"name":"郵件營(yíng)銷(xiāo)"},{"value":367,"name":"直接訪(fǎng)問(wèn)"},{"value":578,"name":"搜索引擎"}]}任務(wù)實(shí)施1、實(shí)施步驟步驟1：引入echarts.js、jquery.js文件步驟2：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子步驟3：初始化echarts實(shí)例對(duì)象步驟4：

$.get()異步加載方法步驟5：準(zhǔn)備配置項(xiàng)任務(wù)實(shí)施任務(wù)實(shí)施(2)繪制餅圖任務(wù)實(shí)施(3)繪制帶有l(wèi)oading效果的Echarts如果異步加載需要一段時(shí)間，我們可以添加loading效果，ECharts默認(rèn)有提供了一個(gè)簡(jiǎn)單的加載動(dòng)畫(huà)。只需要調(diào)用showLoading方法顯示。數(shù)據(jù)加載完成后再調(diào)用hideLoading方法隱藏加載動(dòng)畫(huà)。任務(wù)實(shí)施代碼如下：myChart.showLoading()用于開(kāi)啟loading效果，myChart.hideLoading()用于隱藏loading效果。

在文件不大、網(wǎng)速較快的情況下，文件加載沒(méi)有延遲，loading效果則幾乎看不到。這里使用alert()方法彈框讓loading效果暫停，方便觀(guān)察。子任務(wù)2

dataset數(shù)據(jù)集管理任務(wù)分析：本任務(wù)的主要內(nèi)容數(shù)據(jù)集管理，Echarts使用dataset管理數(shù)據(jù)。dataset組件用于單獨(dú)的數(shù)據(jù)集聲明，從而數(shù)據(jù)可以單獨(dú)管理，被多個(gè)組件復(fù)用，并且可以基于數(shù)據(jù)指定數(shù)據(jù)到視覺(jué)的映射。1．使用二維數(shù)組數(shù)據(jù)集繪圖2．使用數(shù)組嵌套對(duì)象的數(shù)據(jù)集繪圖3．使用seriesLayoutBy映射數(shù)據(jù)4．使用encode映射數(shù)據(jù)任務(wù)資訊1、使用二維數(shù)組方式的dataset數(shù)據(jù)集來(lái)加載數(shù)據(jù)任務(wù)資訊2、使用數(shù)組嵌套對(duì)象方式的dataset數(shù)據(jù)集來(lái)加載數(shù)據(jù)數(shù)組嵌套Object對(duì)象也是一種常見(jiàn)的數(shù)據(jù)存儲(chǔ)格式，使用[{},…，{}]形式來(lái)存儲(chǔ)數(shù)據(jù)。數(shù)組嵌套對(duì)象格式數(shù)據(jù)集繪制的圖形效果與二維數(shù)組數(shù)據(jù)集繪制的效果一樣。任務(wù)資訊3、使用seriesLayoutBy映射數(shù)據(jù)可以在配置項(xiàng)中將數(shù)據(jù)映射到圖形中?？梢允褂胹eries.seriesLayoutBy屬性來(lái)配置dataset是列（column）還是行（row）映射為圖形系列（series），默認(rèn)是按照列（column）來(lái)映射。以下實(shí)例將通過(guò)seriesLayoutBy屬性來(lái)配置數(shù)據(jù)是使用列顯示還是按行顯示。任務(wù)資訊4、使用series.encode映射數(shù)據(jù)encode聲明的基本結(jié)構(gòu)如下，其中冒號(hào)左邊是坐標(biāo)系、標(biāo)簽等特定名稱(chēng)，如'x','y','tooltip'等，冒號(hào)右邊是數(shù)據(jù)中的維度名（string格式）或者維度的序號(hào)（number格式，從0開(kāi)始計(jì)數(shù)），可以指定一個(gè)或多個(gè)維度（使用數(shù)組）。通常情況下，數(shù)據(jù)集中不一定用上所有列，按需求寫(xiě)入encode即可。任務(wù)實(shí)施任務(wù)分析：某電視機(jī)網(wǎng)絡(luò)銷(xiāo)售方近幾年?duì)I銷(xiāo)推廣主要依賴(lài)自媒體、搜索引擎、視頻廣告、APP廣告這幾種方式，下面分別統(tǒng)計(jì)了2020年至2022年這幾種渠道的銷(xiāo)量。見(jiàn)表3-1-1。任務(wù)實(shí)施步驟：步驟1：引入echarts.js和jquery.min.js兩個(gè)js文件步驟2：加載外部JSON數(shù)據(jù)文件，成功后數(shù)據(jù)放入data變量中。步驟3：使用dataset.source參數(shù)設(shè)置數(shù)據(jù)集，通過(guò)data.market指定加載的文件數(shù)據(jù)。步驟4：series中定義了3個(gè)系列，分別對(duì)應(yīng)dataset中的每一列，每個(gè)系列均指定了圖表類(lèi)型為平滑折線(xiàn)圖，顯示數(shù)值標(biāo)簽