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

《數(shù)據(jù)可視化技術(shù)》單元8應(yīng)用非直角坐標(biāo)軸圖描繪手機(jī)經(jī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)營銷和投資。本項(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)營狀況為了分析不同型號(hào)手機(jī)產(chǎn)品銷售利潤占比情況、銷售目標(biāo)達(dá)成情況、影響手機(jī)銷量的因素、手機(jī)產(chǎn)品關(guān)鍵詞搜索熱度等，需要靈活應(yīng)用餅圖、儀表盤、雷達(dá)圖、詞云圖來繪制圖形，幫助商家總結(jié)經(jīng)營情況，做出分析和判斷，改進(jìn)營銷策略。任務(wù)分解：子任務(wù)1華為各系列手機(jī)利潤占比情況餅圖繪制（餅圖）子任務(wù)2某華為手機(jī)天貓專營店年度銷量目標(biāo)達(dá)成情況儀表盤繪制（儀表盤圖）子任務(wù)3手機(jī)購買因素分析雷達(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ù)安全、愛國精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施子任務(wù)1華為各系列手機(jī)利潤占比情況餅圖繪制（餅圖）任務(wù)分析：某華為手機(jī)天貓專營店對(duì)2022年華為各系列手機(jī)銷售利潤情況進(jìn)行了統(tǒng)計(jì)，包括Mate系列、P系列、Nova系列、暢享系列的銷售利潤，見表2-3-1利用表2-3-1數(shù)據(jù)繪制餅圖，顯示標(biāo)題、圖例，餅圖各扇區(qū)代表各種型號(hào)手機(jī)的銷售利潤，鼠標(biāo)移入餅圖顯示各項(xiàng)名稱、利潤值及利潤占比。1、餅圖任務(wù)資訊餅圖是一種用于展示各項(xiàng)數(shù)據(jù)的大小與各項(xiàng)數(shù)據(jù)總和的比例的基本圖形，通過扇形或圓環(huán)的大小來反映各項(xiàng)占總和的比例的大小。ECharts繪制餅圖，需要將ECharts中series的type設(shè)置為pie。（1）基礎(chǔ)餅圖基礎(chǔ)餅圖通過扇形的大小來表示各項(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)的大小來反映各項(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}(mksk8im%)，代表數(shù)據(jù)項(xiàng)名稱、利潤值、利潤占比。圖例設(shè)為垂直顯示，右對(duì)齊series中餅圖大小為網(wǎng)格的60%，data項(xiàng)記錄了各系列手機(jī)的名稱（name）和利潤（value）子任務(wù)2

某華為手機(jī)天貓專營店年度銷量目標(biāo)達(dá)成情況儀表盤繪制任務(wù)分析：某華為手機(jī)天貓專營店2022年定下的銷售額目標(biāo)是2000萬元，實(shí)際營銷達(dá)到2006.6931萬元，定下的銷售利潤目標(biāo)是200萬元，實(shí)際利潤為188.5456萬元。請(qǐng)用儀表盤展示銷售額和利潤的目標(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?；A(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)的百分比來表示；detail為數(shù)值設(shè)置參數(shù)，formatter設(shè)置為{value}%，即數(shù)值顯示格式，同樣可以設(shè)置文字大小和位置；data為數(shù)據(jù)項(xiàng)的值和名稱。子任務(wù)3

手機(jī)購買因素分析雷達(dá)圖繪制任務(wù)分析：某手機(jī)專賣店對(duì)魅族、華為、小米3種品牌的手機(jī)購買因素進(jìn)行了分析，主要對(duì)比價(jià)格、功能、外觀、穩(wěn)定性、安全性等幾種因素，總結(jié)得到的結(jié)果見表2-3-2。繪制雷達(dá)圖，描繪3種品牌手機(jī)購買行為受價(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中data的name值一致radar參數(shù)設(shè)置了5個(gè)因素的字體外觀、雷達(dá)圖特征指標(biāo)的名稱和數(shù)值范圍series指定了圖表類型，存放了3種品牌手機(jī)的指標(biāo)數(shù)據(jù)。子任務(wù)4

手機(jī)產(chǎn)品搜索關(guān)鍵詞熱度的詞云圖繪制任務(wù)分析：某手機(jī)網(wǎng)絡(luò)銷售平臺(tái)對(duì)最近一個(gè)月用戶搜索手機(jī)產(chǎn)品的關(guān)鍵詞進(jìn)行統(tǒng)計(jì)，得到搜索關(guān)鍵詞排行榜，頻率最高的25個(gè)詞語見表2-3-3請(qǐng)用表2-3-3關(guān)鍵詞排行榜數(shù)據(jù)繪制詞云圖，詞云的形狀為星形。任務(wù)資訊1、詞云圖詞云圖是對(duì)文本中出現(xiàn)頻率較高的詞語予以突出顯示的圖形，詞語頻率越高，字體越大，顯示越突出。詞云圖可以讓瀏覽者快速感知突出的詞語，從而抓住重點(diǎn)，理解主旨。使用ECharts創(chuàng)建詞云圖，需要加載echarts-wordcloud.js插件，即在引入echarts.js后，還得引入echarts-wordcloud.js，引入代碼如下詞云圖代碼如下任務(wù)實(shí)施實(shí)現(xiàn)步驟Echarts最基本的代碼結(jié)構(gòu)引入js文件，DOM容器，初始化對(duì)象，準(zhǔn)備option，設(shè)置optionOption相關(guān)配置首先定義變量words數(shù)組，用于存儲(chǔ)關(guān)鍵詞搜