《數(shù)據(jù)可視化技術(shù)》 課件 06 Echarts基本組件的使用（二）

《數(shù)據(jù)可視化技術(shù)》單元6Echarts基本組件的使用（二）項(xiàng)目介紹本次課開始學(xué)習(xí)項(xiàng)目二：數(shù)碼產(chǎn)品銷售數(shù)據(jù)ECharts可視化數(shù)碼產(chǎn)品主要包括計算機(jī)、通信和消費(fèi)電子產(chǎn)品。對數(shù)碼產(chǎn)品銷售數(shù)據(jù)進(jìn)行分析和可視化展示，有助于相關(guān)人員了解各種產(chǎn)品銷售情況，了解哪些是暢銷產(chǎn)品、哪些是冷門產(chǎn)品，幫助改進(jìn)營銷和投資。本項(xiàng)目使用ECharts技術(shù)完成對數(shù)碼產(chǎn)品銷售數(shù)據(jù)的分析與可視化。01準(zhǔn)備活動點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)一

使用基本組件繪制數(shù)碼產(chǎn)品銷量圖店鋪商家為了直觀地查看各種數(shù)碼產(chǎn)品的銷量情況、進(jìn)貨量與銷量對比情況，可以借助ECharts開發(fā)數(shù)據(jù)圖表，直觀地展示數(shù)據(jù)統(tǒng)計結(jié)果要使用ECharts進(jìn)行數(shù)據(jù)可視化，需要搭建ECharts開發(fā)環(huán)境，設(shè)置ECharts常用組件。本任務(wù)將繪制數(shù)碼產(chǎn)品進(jìn)貨量與銷量對比圖、2017年—2020年各品牌數(shù)碼產(chǎn)品銷量情況對比圖任務(wù)分解：子任務(wù)1搭建ECharts開發(fā)環(huán)境（已完成）子任務(wù)2繪制數(shù)碼產(chǎn)品進(jìn)貨量與銷量對比圖(部分完成）子任務(wù)3繪制2017年—2020年各品牌數(shù)碼產(chǎn)品銷量情況對比圖（

未完成）學(xué)習(xí)目標(biāo)1、知識（1）掌握提示框、工具欄的設(shè)置和使用（2）掌握Echarts時間軸、數(shù)據(jù)縮放區(qū)域、網(wǎng)格的設(shè)置2、技能（1）能夠使用Echarts圖表中的提示框、工具欄（2）能夠使用時間軸、數(shù)據(jù)縮放區(qū)域、網(wǎng)格等組件3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛國精神；（3）信息檢索能力02發(fā)展活動任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)2-2繪制數(shù)碼產(chǎn)品進(jìn)貨量與銷量對比圖（柱狀圖）任務(wù)分析：上節(jié)課已經(jīng)完成了數(shù)碼產(chǎn)品進(jìn)貨量與銷量對比圖基礎(chǔ)部分的配置，本任務(wù)將繼續(xù)完善，添加提示框、工具欄、數(shù)據(jù)縮放區(qū)域、網(wǎng)格等組件。1、配置項(xiàng)任務(wù)資訊（1）提示框提示框組件通過tooltip進(jìn)行配置，代碼如下：1、配置項(xiàng)任務(wù)資訊（2）工具欄工具欄組件通過toolbox進(jìn)行配置，代碼如下1、配置項(xiàng)任務(wù)資訊（3）數(shù)據(jù)縮放區(qū)域數(shù)據(jù)區(qū)域縮放可以實(shí)現(xiàn)區(qū)域放大、查看數(shù)據(jù)圖表細(xì)節(jié)。前面工具欄組件提供了數(shù)據(jù)縮放按鈕，可以通過該按鈕實(shí)現(xiàn)區(qū)域的放大和還原。除此之外，也可以利用dataZoom組件，通過滑動條或鼠標(biāo)滾輪實(shí)現(xiàn)縮放數(shù)據(jù)區(qū)域縮放組件通過dataZoom進(jìn)行配置，代碼如下1、配置項(xiàng)任務(wù)資訊（3）數(shù)據(jù)縮放區(qū)域1、配置項(xiàng)任務(wù)資訊（3）數(shù)據(jù)縮放區(qū)域下面看一個具體的dataZoom可視化示例，代碼如下圖2-1-10中，可以隨意拖到x軸或y軸滑動條的兩端，實(shí)現(xiàn)窗口數(shù)據(jù)縮放。由于x軸的filterMode為filter，y軸的filterMode為empty，則x軸作為主軸，x的縮放會影響y軸數(shù)據(jù)，y軸作為輔助軸，y軸的縮放不會影響x軸的數(shù)據(jù)1、配置項(xiàng)任務(wù)資訊（4）時間軸時間軸（timeline）組件提供了在多個EChartsoption間進(jìn)行切換、播放等操作的功能。時間軸和其他場景有些不同，它需要操作多個option?？梢詫Charts傳統(tǒng)的option稱為原子option，包含多個原子option的option稱為復(fù)合option任務(wù)實(shí)施實(shí)現(xiàn)步驟Echarts最基本的代碼結(jié)構(gòu)引入js文件，DOM容器，初始化對象，準(zhǔn)備option，設(shè)置optionOption相關(guān)配置工具欄提示框網(wǎng)格數(shù)據(jù)區(qū)域縮放子任務(wù)3繪制2017年—2020年各品牌數(shù)碼產(chǎn)品銷量情況對比圖任務(wù)分析：某通信產(chǎn)品店主要銷售數(shù)碼產(chǎn)品，藍(lán)牙/無線耳機(jī)銷售是其主打業(yè)務(wù)。為了更好地了解近幾年各種品牌耳機(jī)銷量情況，以便改進(jìn)營銷策略，該通信產(chǎn)品店整理了2017年至2020年主要品牌耳機(jī)的銷量數(shù)據(jù)，見表2-1-2。利用上面數(shù)據(jù)在一個ECharts實(shí)例對象中繪制4個子圖，分別顯示2017年—2020年主要品牌的銷售數(shù)據(jù)，子圖橫軸為各品牌耳機(jī)名稱，縱軸為年度銷量。通過子圖完成各年度銷量對比。1、配置項(xiàng)任務(wù)資訊（5）網(wǎng)格網(wǎng)格組件通過grid進(jìn)行配置，代碼如下任務(wù)實(shí)施實(shí)現(xiàn)步驟Echarts最基本的代碼結(jié)構(gòu)引入js文件，DOM容器，初始化對象，準(zhǔn)備option，設(shè)置optionOption相關(guān)配置要繪制4個子圖，需要在同一個ECharts實(shí)例中創(chuàng)建4個直角坐標(biāo)軸，對應(yīng)4個網(wǎng)格，4個數(shù)據(jù)系列。橫軸、縱軸分別使用gridIndex進(jìn)行編