《數(shù)據(jù)可視化技術(shù)》 課件 07 應(yīng)用直角坐標(biāo)軸圖描繪電腦銷量情況、08 應(yīng)用非直角坐標(biāo)軸圖描繪手機(jī)經(jīng)營(yíng)情況

《數(shù)據(jù)可視化技術(shù)》單元7應(yīng)用直角坐標(biāo)軸圖描繪電腦銷量情況項(xiàng)目介紹本次課開始學(xué)習(xí)項(xiàng)目二：數(shù)碼產(chǎn)品銷售數(shù)據(jù)ECharts可視化數(shù)碼產(chǎn)品主要包括計(jì)算機(jī)、通信和消費(fèi)電子產(chǎn)品。對(duì)數(shù)碼產(chǎn)品銷售數(shù)據(jù)進(jìn)行分析和可視化展示，有助于相關(guān)人員了解各種產(chǎn)品銷售情況，了解哪些是暢銷產(chǎn)品、哪些是冷門產(chǎn)品，幫助改進(jìn)營(yíng)銷和投資。本項(xiàng)目使用ECharts技術(shù)完成對(duì)數(shù)碼產(chǎn)品銷售數(shù)據(jù)的分析與可視化。01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)一應(yīng)用直角坐標(biāo)軸圖描繪計(jì)算機(jī)銷量情況為了描述不同品牌的數(shù)碼產(chǎn)品不同月份銷量變化情況，描述產(chǎn)品各月銷量對(duì)比情況，以及影響產(chǎn)品銷量的各種因素之間的關(guān)系，需要靈活運(yùn)用折線圖、柱狀圖、散點(diǎn)圖和氣泡圖繪制各種圖形，幫助商家分析產(chǎn)品銷量情況、影響銷量的因素，有助于商家改進(jìn)經(jīng)營(yíng)方法和手段。任務(wù)分解：子任務(wù)1

3種品牌計(jì)算機(jī)各月銷量折線圖繪制（多線折線圖）子任務(wù)2歷年筆記本計(jì)算機(jī)不同價(jià)位銷量堆疊柱狀圖繪制（堆疊水平柱狀圖）子任務(wù)3繪制聯(lián)想各系列筆記本計(jì)算機(jī)銷售利潤(rùn)情況氣泡圖（氣泡圖）學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握折線圖、柱狀圖的繪制（2）掌握散點(diǎn)圖、氣泡圖的繪制2、技能（1）能夠繪制折線圖、柱狀圖、散點(diǎn)圖、氣泡圖3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)1

3種品牌計(jì)算機(jī)各月銷量折線圖繪制（多線折線圖）任務(wù)分析：某計(jì)算機(jī)專賣店主要銷售品牌計(jì)算機(jī)，2021年3種品牌計(jì)算機(jī)每月銷量見表2-2-1。利用上面數(shù)據(jù)繪制多條折線圖，橫軸為月份，縱軸為數(shù)量，顯示標(biāo)題、提示框、圖例，并顯示每種品牌計(jì)算機(jī)的平均銷量標(biāo)志線。1、折線圖任務(wù)資訊折線圖是一種將點(diǎn)連接成線的基礎(chǔ)圖形，用于表示數(shù)據(jù)的變化趨勢(shì)，一般用在時(shí)間序列中顯示數(shù)據(jù)的趨勢(shì)。（1）基礎(chǔ)折線圖ECharts創(chuàng)建折線圖，需要將數(shù)據(jù)系列（series）中的type設(shè)為line，同時(shí)保證xAxis橫軸數(shù)據(jù)長(zhǎng)度和series縱軸數(shù)據(jù)長(zhǎng)度一致，示例代碼如下1、折線圖任務(wù)資訊（2）多條折線圖當(dāng)series數(shù)組中放入多個(gè)系列數(shù)據(jù)時(shí)，就可以繪制多條折線圖1、折線圖任務(wù)資訊（2）堆疊折線圖為了讓數(shù)據(jù)呈現(xiàn)疊加效果，即從第一個(gè)系列數(shù)據(jù)開始，后一個(gè)系列數(shù)據(jù)在前一個(gè)系列數(shù)據(jù)的基礎(chǔ)上，分別累加，并且填充折線與橫軸之間的區(qū)域，那么可以在series參數(shù)的每個(gè)系列中加上stack和areaStyle參數(shù)。stack：Total實(shí)現(xiàn)數(shù)據(jù)的疊加，stack后面引號(hào)內(nèi)容相同即可。areaStyle：{}實(shí)現(xiàn)數(shù)據(jù)區(qū)域的填充，大括號(hào)內(nèi)容可以為空。在上一個(gè)示例基礎(chǔ)上，實(shí)現(xiàn)數(shù)據(jù)堆疊只要修改series參數(shù)即可，代碼如下：任務(wù)實(shí)施ECharts最基本的代碼結(jié)構(gòu)引入js文件,DOM容器,初始化對(duì)象,設(shè)置optionOption設(shè)置：title設(shè)置了標(biāo)題居中顯示。tooltip觸發(fā)條件為item，提示內(nèi)容顯示格式為:{c}(vfhfpd5%)，代表數(shù)據(jù)項(xiàng)名稱、利潤(rùn)值、利潤(rùn)占比。圖例設(shè)為垂直顯示，右對(duì)齊series中餅圖大小為網(wǎng)格的60%，data項(xiàng)記錄了各系列手機(jī)的名稱（name）和利潤(rùn)（value）步驟：子任務(wù)2

歷年筆記本計(jì)算機(jī)不同價(jià)位銷量堆疊柱狀圖繪制任務(wù)分析：某聯(lián)想筆記本計(jì)算機(jī)專賣店，為了了解客戶對(duì)各種價(jià)位的喜歡程度，梳理了2016年—2022年聯(lián)想筆記本計(jì)算機(jī)各種價(jià)位銷量情況，見表2-2-2。利用上面數(shù)據(jù)繪制堆疊水平柱狀圖，縱軸為年份，橫軸為銷量，同一年份不同價(jià)位的銷售數(shù)據(jù)顯示在同一個(gè)柱子中。圖表顯示標(biāo)題、提示框、圖例。2、柱狀圖任務(wù)資訊柱狀圖一般用于表示類別數(shù)據(jù)的大小，用于數(shù)據(jù)之間的比較，適用于較小的數(shù)據(jù)集分析（1）基礎(chǔ)柱狀圖將series參數(shù)中的type設(shè)置為bar就可以繪制柱狀圖在series參數(shù)中加上showBackground:true，可以為柱子設(shè)置背景色。在series參數(shù)中加上label:{show:true,position:'top'}，可在柱子上方顯示刻度值。在xAxis中加上axisTick:{alignWithLabel:true}，可以設(shè)置坐標(biāo)軸刻度與標(biāo)簽對(duì)齊。2、柱狀圖任務(wù)資訊（2）聚合柱狀圖在一些場(chǎng)景中，橫軸上每一類別可能有兩個(gè)及兩個(gè)以上維度，為了更直觀地顯示各維度信息，需要使用聚合柱狀圖來(lái)表示。聚合柱狀圖會(huì)在series參數(shù)中加入多個(gè)系列的數(shù)據(jù)，一般會(huì)設(shè)置legend圖例，圖例元素與系列個(gè)數(shù)一致。示例如下2、柱狀圖任務(wù)資訊（3）水平柱狀圖要將垂直柱狀圖修改成水平柱狀圖，只需將xAxis、yAxis的內(nèi)容相互交換。如果要顯示柱子刻度值，需要將label的position改成right，則刻度值將在水平柱子的右側(cè)顯示2、柱狀圖任務(wù)資訊（4）堆疊柱狀圖聚合柱狀圖在一個(gè)類別下形成多個(gè)維度的柱子，如果要將多個(gè)維度數(shù)據(jù)放在一個(gè)柱子上并堆疊起來(lái)，顯示成一段一段的效果，則可以創(chuàng)建堆疊柱狀圖。代碼如下：上述代碼series參數(shù)中的每個(gè)系列均代表一個(gè)網(wǎng)店，同一種商品在不同網(wǎng)店的銷售數(shù)據(jù)形成堆疊效果，通過將stack設(shè)置為Total來(lái)實(shí)現(xiàn)任務(wù)實(shí)施ECharts最基本的代碼結(jié)構(gòu)引入js文件,DOM容器,初始化對(duì)象,設(shè)置optionOption設(shè)置legend的data放置6個(gè)價(jià)位等級(jí)數(shù)據(jù)，分別對(duì)應(yīng)series參數(shù)各系列的名稱yAxis的data放置2016年至2022年7個(gè)標(biāo)簽數(shù)據(jù)series參數(shù)中放置6個(gè)系列數(shù)據(jù)，系列名稱分別對(duì)應(yīng)不同的價(jià)位等級(jí)各系列通過設(shè)置stack實(shí)現(xiàn)堆疊效果。步驟：子任務(wù)3繪制聯(lián)想各系列筆記本計(jì)算機(jī)銷售利潤(rùn)情況氣泡圖任務(wù)分析：某聯(lián)想筆記本計(jì)算機(jī)天貓專營(yíng)店對(duì)2022年聯(lián)想各系列筆記本計(jì)算機(jī)營(yíng)收情況進(jìn)行了統(tǒng)計(jì)，包括小新系列、拯救者系列、YOGA系列、ThinkBook系列的銷售金額、利潤(rùn)、利潤(rùn)貢獻(xiàn)占比，見表2-2-3利用表2-2-3數(shù)據(jù)繪制氣泡圖，橫軸為銷售金額，縱軸為利潤(rùn)，利潤(rùn)貢獻(xiàn)占比數(shù)值為氣泡大小。圖表顯示標(biāo)題、提示框等信息，提示框要求顯示計(jì)算機(jī)型號(hào)，以及銷售金額、利潤(rùn)1、散點(diǎn)圖任務(wù)資訊散點(diǎn)圖也是一種基礎(chǔ)圖形，一般用于展示兩類數(shù)據(jù)之間的關(guān)系，表示因變量隨自變量變化的大致趨勢(shì)。其價(jià)值在于發(fā)現(xiàn)變量之間的關(guān)系，如線性關(guān)系、指數(shù)關(guān)系、對(duì)數(shù)關(guān)系等，或者沒有關(guān)系，據(jù)此可以選擇合適的函數(shù)對(duì)數(shù)據(jù)點(diǎn)進(jìn)行擬合，因此更適合作為研究型圖表。制作散點(diǎn)圖需要將series中的type設(shè)置為scatter（1）基礎(chǔ)散點(diǎn)圖基礎(chǔ)散點(diǎn)圖一般是一個(gè)類別的數(shù)據(jù)，數(shù)據(jù)分為x軸、y軸兩個(gè)維度的數(shù)據(jù)，兩個(gè)維度的數(shù)據(jù)可以組成數(shù)組，并放在series的data中。代碼如下所示1、散點(diǎn)圖任務(wù)資訊（2）多類別散點(diǎn)圖基礎(chǔ)散點(diǎn)圖只有一種類別的數(shù)據(jù)，但有時(shí)需要在一個(gè)坐標(biāo)系中顯示不同類別的散點(diǎn)。這就需要用到多類別散點(diǎn)圖，在series參數(shù)中增加新的系列數(shù)據(jù)來(lái)實(shí)現(xiàn)，且一般會(huì)增加圖例進(jìn)行區(qū)別。代碼如下：上述代碼中xAxis、yAxis設(shè)置scale為true，用于控制坐標(biāo)軸數(shù)值范圍，基本上以實(shí)際數(shù)據(jù)的大小范圍設(shè)置縮放比例。代碼運(yùn)行結(jié)果如圖2-2-8所示。1、散點(diǎn)圖任務(wù)資訊（3）氣泡圖氣泡圖與散點(diǎn)圖類似，只是在原來(lái)兩個(gè)維度的基礎(chǔ)上增加了一個(gè)維度的數(shù)據(jù)，用來(lái)表示點(diǎn)的大小。因此，氣泡圖數(shù)據(jù)內(nèi)部數(shù)組應(yīng)該有3個(gè)元素，分別為x軸、y軸、氣泡圖大小的數(shù)據(jù)。代碼如下data內(nèi)部數(shù)組有3個(gè)元素，第3個(gè)元素代表氣泡的大小，在symbolSize中指定，使用function函數(shù)傳遞data并返回下標(biāo)為2的元素來(lái)指定任務(wù)實(shí)施ECharts最基本的代碼結(jié)構(gòu)引入js文件,DOM容器,初始化對(duì)象,設(shè)置optionOption設(shè)置data數(shù)組各列由銷售金額、利潤(rùn)、利潤(rùn)貢獻(xiàn)占比、計(jì)算機(jī)型號(hào)組成數(shù)組下標(biāo)為0的元素，對(duì)應(yīng)x軸的數(shù)值。下標(biāo)為1的元素對(duì)應(yīng)y軸的數(shù)值symbolSize氣泡大小由數(shù)組下標(biāo)為2的元素決定emphasis提示信息由數(shù)組下標(biāo)為3的元素決定，提示標(biāo)簽顯示在上方步驟：03整合活動(dòng)總結(jié)、知識(shí)點(diǎn)梳理學(xué)習(xí)總結(jié)拓展：1、繪制成績(jī)展示柱狀圖，效果如下拓展任務(wù)《數(shù)據(jù)可視化技術(shù)》單元8應(yīng)用非直角坐標(biāo)軸圖描繪手機(jī)經(jīng)營(yíng)情況項(xiàng)目介紹本次課繼續(xù)學(xué)習(xí)項(xiàng)目二：數(shù)碼產(chǎn)品銷售數(shù)據(jù)ECharts可視化數(shù)碼產(chǎn)品主要包括計(jì)算機(jī)、通信和消費(fèi)電子產(chǎn)品。對(duì)數(shù)碼產(chǎn)品銷售數(shù)據(jù)進(jìn)行分析和可視化展示，有助于相關(guān)人員了解各種產(chǎn)品銷售情況，了解哪些是暢銷產(chǎn)品、哪些是冷門產(chǎn)品，幫助改進(jìn)營(yíng)銷和投資。本項(xiàng)目使用ECharts技術(shù)完成對(duì)數(shù)碼產(chǎn)品銷售數(shù)據(jù)的分析與可視化。01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)三應(yīng)用非直角坐標(biāo)軸圖描繪手機(jī)經(jīng)營(yíng)狀況為了分析不同型號(hào)手機(jī)產(chǎn)品銷售利潤(rùn)占比情況、銷售目標(biāo)達(dá)成情況、影響手機(jī)銷量的因素、手機(jī)產(chǎn)品關(guān)鍵詞搜索熱度等，需要靈活應(yīng)用餅圖、儀表盤、雷達(dá)圖、詞云圖來(lái)繪制圖形，幫助商家總結(jié)經(jīng)營(yíng)情況，做出分析和判斷，改進(jìn)營(yíng)銷策略。任務(wù)分解：子任務(wù)1華為各系列手機(jī)利潤(rùn)占比情況餅圖繪制（餅圖）子任務(wù)2某華為手機(jī)天貓專營(yíng)店年度銷量目標(biāo)達(dá)成情況儀表盤繪制（儀表盤圖）子任務(wù)3手機(jī)購(gòu)買因素分析雷達(dá)圖繪制（雷達(dá)圖）子任務(wù)4手機(jī)產(chǎn)品搜索關(guān)鍵詞熱度的詞云圖繪制（詞云圖）學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握餅圖、儀表盤圖、雷達(dá)圖、詞云圖的繪制（2）理解餅圖、儀表盤圖、雷達(dá)圖、詞云圖的用途2、技能（1）能夠繪制餅圖、儀表盤圖、雷達(dá)圖、詞云圖3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)1華為各系列手機(jī)利潤(rùn)占比情況餅圖繪制（餅圖）任務(wù)分析：某華為手機(jī)天貓專營(yíng)店對(duì)2022年華為各系列手機(jī)銷售利潤(rùn)情況進(jìn)行了統(tǒng)計(jì)，包括Mate系列、P系列、Nova系列、暢享系列的銷售利潤(rùn)，見表2-3-1利用表2-3-1數(shù)據(jù)繪制餅圖，顯示標(biāo)題、圖例，餅圖各扇區(qū)代表各種型號(hào)手機(jī)的銷售利潤(rùn)，鼠標(biāo)移入餅圖顯示各項(xiàng)名稱、利潤(rùn)值及利潤(rùn)占比。1、餅圖任務(wù)資訊餅圖是一種用于展示各項(xiàng)數(shù)據(jù)的大小與各項(xiàng)數(shù)據(jù)總和的比例的基本圖形，通過扇形或圓環(huán)的大小來(lái)反映各項(xiàng)占總和的比例的大小。ECharts繪制餅圖，需要將ECharts中series的type設(shè)置為pie。（1）基礎(chǔ)餅圖基礎(chǔ)餅圖通過扇形的大小來(lái)表示各項(xiàng)占比?；A(chǔ)餅圖一般會(huì)設(shè)置標(biāo)題、提示框、圖例、系列等，其中提示框觸發(fā)條件不再是軸（axis），而是項(xiàng)（item）。餅圖中每一個(gè)扇形代表一項(xiàng)數(shù)據(jù)，對(duì)應(yīng)圖例中的每一項(xiàng)值。系列中data各項(xiàng)以字典方式存儲(chǔ)數(shù)據(jù)?；A(chǔ)餅圖的ECharts代碼如下任務(wù)資訊（2）環(huán)形圖環(huán)形圖通過圓環(huán)的大小來(lái)反映各項(xiàng)所占比例的大小。要?jiǎng)?chuàng)建環(huán)形圖，只需要在series參數(shù)中加上radius，從而規(guī)定內(nèi)環(huán)、外環(huán)直徑即可。環(huán)形圖的ECharts代碼如下1、餅圖任務(wù)實(shí)施ECharts最基本的代碼結(jié)構(gòu)引入js文件,DOM容器,初始化對(duì)象,設(shè)置optionOption設(shè)置：步驟：title設(shè)置了標(biāo)題居中顯示。tooltip觸發(fā)條件為item，提示內(nèi)容顯示格式為:{c}(l3zn1r3%)，代表數(shù)據(jù)項(xiàng)名稱、利潤(rùn)值、利潤(rùn)占比。圖例設(shè)為垂直顯示，右對(duì)齊series中餅圖大小為網(wǎng)格的60%，data項(xiàng)記錄了各系列手機(jī)的名稱（name）和利潤(rùn)（value）子任務(wù)2

某華為手機(jī)天貓專營(yíng)店年度銷量目標(biāo)達(dá)成情況儀表盤繪制任務(wù)分析：某華為手機(jī)天貓專營(yíng)店2022年定下的銷售額目標(biāo)是2000萬(wàn)元，實(shí)際營(yíng)銷達(dá)到2006.6931萬(wàn)元，定下的銷售利潤(rùn)目標(biāo)是200萬(wàn)元，實(shí)際利潤(rùn)為188.5456萬(wàn)元。請(qǐng)用儀表盤展示銷售額和利潤(rùn)的目標(biāo)達(dá)成度，兩個(gè)目標(biāo)達(dá)成度制作到一個(gè)儀表盤中任務(wù)資訊1、儀表盤儀表盤是用于表示某事件進(jìn)度狀態(tài)的一種圖形，一般用于強(qiáng)調(diào)或重點(diǎn)展示狀態(tài)值。ECharts繪制儀表盤，需要將series參數(shù)中type設(shè)為gauge。基礎(chǔ)儀表盤代碼如下任務(wù)實(shí)施實(shí)現(xiàn)步驟Echarts最基本的代碼結(jié)構(gòu)引入js文件，DOM容器，初始化對(duì)象，準(zhǔn)備option，設(shè)置optionOption相關(guān)配置tooltip提示信息顯示了系列名稱、數(shù)據(jù)項(xiàng)名稱和數(shù)據(jù)值series中有兩個(gè)系列，分別對(duì)應(yīng)兩個(gè)目標(biāo)達(dá)成度的數(shù)據(jù)信息。type為gauge，表示儀表盤圖；radius為80%表示儀表盤半徑是原始大小的80%，默認(rèn)是75%；title為系列標(biāo)題設(shè)置參數(shù)，fontSize可設(shè)置字體大小，offsetCenter可設(shè)置文字位置，位置使用偏離中心點(diǎn)的百分比來(lái)表示；detail為數(shù)值設(shè)置參數(shù)，formatter設(shè)置為{value}%，即數(shù)值顯示格式，同樣可以設(shè)置文字大小和位置；data為數(shù)據(jù)項(xiàng)的值和名稱。子任務(wù)3

手機(jī)購(gòu)買因素分析雷達(dá)圖繪制任務(wù)分析：某手機(jī)專賣店對(duì)魅族、華為、小米3種品牌的手機(jī)購(gòu)買因素進(jìn)行了分析，主要對(duì)比價(jià)格、功能、外觀、穩(wěn)定性、安全性等幾種因素，總結(jié)得到的結(jié)果見表2-3-2。繪制雷達(dá)圖，描繪3種品牌手機(jī)購(gòu)買行為受價(jià)格、功能、外觀、穩(wěn)定性、安全性等幾種因素影響的程度任務(wù)資訊1、雷達(dá)圖雷達(dá)圖用于描述不同單位事物多個(gè)特性的表現(xiàn)差異，從圓心開始的多條軸線上顯示多變量數(shù)據(jù)，主要描述多項(xiàng)指標(biāo)的數(shù)值，以及對(duì)應(yīng)的占比情況。ECharts繪制雷達(dá)圖，需要將series參數(shù)中type設(shè)為radar?；A(chǔ)雷達(dá)圖代碼如下：任務(wù)實(shí)施實(shí)現(xiàn)步驟Echarts最基本的代碼結(jié)構(gòu)引入js文件，DOM容器，初始化對(duì)象，準(zhǔn)備option，設(shè)置optionOption相關(guān)配置legend設(shè)置了3項(xiàng)元素的圖例，與后面series