《數(shù)據(jù)可視化技術(shù)》 課件 10 電器產(chǎn)品營銷數(shù)據(jù)異步加載和數(shù)據(jù)集管理

《數(shù)據(jù)可視化技術(shù)》課題10電器產(chǎn)品營銷數(shù)據(jù)異步加載和數(shù)據(jù)集管理01準(zhǔn)備活動點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：電器產(chǎn)品營銷數(shù)據(jù)的可視化分析：當(dāng)前電子商務(wù)普及，交易數(shù)據(jù)非常龐大。對電子商務(wù)數(shù)據(jù)通過可視化手段進(jìn)行分析和圖表展示，可以幫助銷售人員改進(jìn)銷售手段和策略，提高銷售量。本單元講解異步數(shù)據(jù)加載、數(shù)據(jù)集管理、數(shù)據(jù)映射。任務(wù)1、ECharts異步加載數(shù)據(jù)、加載json數(shù)據(jù)任務(wù)2、dataset數(shù)據(jù)集管理學(xué)習(xí)目標(biāo)1、知識（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ù)安全、愛國精神；（3）信息檢索能力02發(fā)展活動任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)1

ECharts異步加載數(shù)據(jù)、加載json數(shù)據(jù)任務(wù)分析：本任務(wù)的主要內(nèi)容包括異步加載概念，jQuery加載文件方法，loading加載，使用異步加載數(shù)據(jù)開發(fā)ECharts項(xiàng)目。1．異步加載概念2．jQuery加載文件方法3．使用異步加載數(shù)據(jù)開發(fā)ECharts項(xiàng)目4．loading加載1．異步加載概念任務(wù)資訊異步數(shù)據(jù)加載就是在加載數(shù)據(jù)時仍然執(zhí)行其他程序，不會導(dǎo)致其他程序等待加載數(shù)據(jù)完后才執(zhí)行。一般對不夠重要的、數(shù)據(jù)量較大的圖表使用異步加載方式，這樣才不會因?yàn)閼?yīng)用程序界面空白、卡頓而影響用戶正常使用。默認(rèn)情況下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ù)實(shí)施1、ECharts異步加載數(shù)據(jù)ECharts通常數(shù)據(jù)設(shè)置在setOption中，如果我們需要異步加載數(shù)據(jù)，可以配合jQuery等工具，在異步獲取數(shù)據(jù)后通過setOption填入數(shù)據(jù)和配置項(xiàng)就行。創(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ù)實(shí)施1、實(shí)施步驟步驟1：引入echarts.js、jquery.js文件步驟2：準(zhǔn)備一個呈現(xiàn)圖表的盒子步驟3：初始化echarts實(shí)例對象步驟4：

$.get()異步加載方法步驟5：準(zhǔn)備配置項(xiàng)任務(wù)實(shí)施任務(wù)實(shí)施(2)繪制餅圖任務(wù)實(shí)施(3)繪制帶有l(wèi)oading效果的Echarts如果異步加載需要一段時間，我們可以添加loading效果，ECharts默認(rèn)有提供了一個簡單的加載動畫。只需要調(diào)用showLoading方法顯示。數(shù)據(jù)加載完成后再調(diào)用hideLoading方法隱藏加載動畫。任務(wù)實(shí)施代碼如下：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組件用于單獨(dú)的數(shù)據(jù)集聲明，從而數(shù)據(jù)可以單獨(dú)管理，被多個組件復(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ù)可以在配置項(xiàng)中將數(shù)據(jù)映射到圖形中?？梢允褂胹eries.seriesLayoutBy屬性來配置dataset是列（column）還是行（row）映射為圖形系列（series），默認(rèn)是按照列（column）來映射。以下實(shí)例將通過seriesLayoutBy屬性來配置數(shù)據(jù)是使用列顯示還是按行顯示。任務(wù)資訊4、使用series.encode映射數(shù)據(jù)encode聲明的基本結(jié)構(gòu)如下，其中冒號左邊是坐標(biāo)系、標(biāo)簽等特定名稱，如'x','y','tooltip'等，冒號右邊是數(shù)據(jù)中的維度名（string格式）或者維度的序號（number格式，從0開始計數(shù)），可以指定一個或多個維度（使用數(shù)組）。通常情況下，數(shù)據(jù)集中不一定用上所有列，按需求寫入encode即可。任務(wù)實(shí)施任務(wù)分析：某電視機(jī)網(wǎng)絡(luò)銷售方近幾年營銷推廣主要依賴自媒體、搜索引擎、視頻廣告、APP廣告這幾種方式，下面分別統(tǒng)計了2020年至2022年這幾種渠道的銷量。見表3-1-1。任務(wù)實(shí)施步驟：步驟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ù)值標(biāo)簽。任務(wù)實(shí)施

繪制線圖03整合活動總結(jié)、知識點(diǎn)梳理學(xué)習(xí)總結(jié)拓展任務(wù)拓展：加載外部json數(shù)據(jù)并使用series.encode方式加載數(shù)據(jù)集，繪制“收入-預(yù)期壽命”散點(diǎn)圖(1)訪問/static/js/life-exp