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

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

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

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

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

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

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