《數(shù)據(jù)可視化技術(shù)》 課件 11使用視覺(jué)通道和布局技術(shù)對(duì)電器銷售數(shù)據(jù)可視化

《數(shù)據(jù)可視化技術(shù)》課題11使用視覺(jué)通道和布局技術(shù)對(duì)電器銷售數(shù)據(jù)可視化使用01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容任務(wù)：電器產(chǎn)品營(yíng)銷數(shù)據(jù)的可視化分析：電器產(chǎn)品種類繁多，交易數(shù)據(jù)量大，通過(guò)可視化手段對(duì)其銷售數(shù)據(jù)進(jìn)行分析和圖表展示，可以幫助銷售人員改進(jìn)銷售手段和策略，提高銷售量。本單元交互組件visualMap、定位和布局，自動(dòng)布局技術(shù)。任務(wù)1、使用visualMap實(shí)現(xiàn)視覺(jué)通道的映射任務(wù)2、定位和布局任務(wù)3、自動(dòng)布局技術(shù)學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握visualMap（2）了解定位布局的方式（3）掌握自適應(yīng)布局技術(shù)2、技能（1）能夠使用Echarts交互組件（2）能夠使用ECharts響應(yīng)式對(duì)組件的定位和布局3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛(ài)國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施任務(wù)分析1、教師講解

VisualMap參數(shù)定位和布局方法2、學(xué)生討論（1）如何實(shí)現(xiàn)交互組件（2）如何實(shí)現(xiàn)響應(yīng)式布局3、明確任務(wù)（1）使用visualMap實(shí)現(xiàn)視覺(jué)通道的映射（2）定位和布局（3）自動(dòng)布局技術(shù)任務(wù)資訊1、ECharts交互組件的使用ECharts提供了很多交互組件，例如：圖例組件legend、標(biāo)題組件title、視覺(jué)映射組件visualMap、數(shù)據(jù)區(qū)域縮放組件dataZoom、時(shí)間線組件timeline等。下面將使用視覺(jué)映射組件visualMap、數(shù)據(jù)區(qū)域縮放組件dataZoom。（1）使用visualMap實(shí)現(xiàn)視覺(jué)通道的映射visualMap組件可以進(jìn)行視覺(jué)通道的映射，包括顏色、尺寸等外觀元素的改變，視覺(jué)元素主要有：

symbol:

圖元的圖形類別。

symbolSize:圖元的大小。

color:

圖元的顏色。任務(wù)實(shí)施

colorAlpha:

圖元的顏色的透明度。

opacity:

圖元以及其附屬物（如文字標(biāo)簽）的透明度。

colorLightness:

顏色的明暗度。

colorSaturation:

顏色的飽和度。

colorHue:顏色的色調(diào)。visualMap組件可以定義多個(gè)，從而可以同時(shí)對(duì)數(shù)據(jù)中的多個(gè)維度進(jìn)行視覺(jué)映射。映射實(shí)例，如下圖所示。水平柱狀圖y軸表示產(chǎn)品，x軸表示數(shù)量，最下面為視覺(jué)通道，表示產(chǎn)品的評(píng)分，評(píng)分越高的柱子顏色越紅，評(píng)分越低的柱子顏色越淺當(dāng)鼠標(biāo)移入水平柱子，下方視覺(jué)通道顯示相應(yīng)的評(píng)分信息。子任務(wù)1使用visualMap組件完成下面圖表制作子任務(wù)1如果visualMap的type改為piecewise，那么視覺(jué)通道將呈現(xiàn)分段的效果，不同段的顏色對(duì)應(yīng)不同水平柱子的顏色，表示不同的評(píng)分區(qū)間。單擊分段，可以打開或關(guān)閉對(duì)應(yīng)評(píng)分區(qū)間的水平柱子。如下圖所示：任務(wù)資訊2、定位和布局任務(wù)資訊2、定位和布局任務(wù)資訊3、自適應(yīng)布局技術(shù)ECharts在設(shè)置好DIV容器大小后，不再改變其大小。瀏覽時(shí)即使瀏覽器縮放寬度小于容器大小，圖表也不會(huì)發(fā)生變化，部分區(qū)域會(huì)被遮擋，為了解決這個(gè)問(wèn)題，ECharts運(yùn)用resize()方法和MediaQuery方法，實(shí)現(xiàn)自適應(yīng)。（1）resize()方法ECharts可以使用resize()方法為圖表設(shè)置特定的大小，指定寬度和高度，實(shí)現(xiàn)圖表大小不等于容器大小的效果。如果在創(chuàng)建DIV容器時(shí)，沒(méi)有指定大小或通過(guò)樣式指定了大?。ㄈ?lt;divid="main"></div>），在后面都可以重設(shè)圖表大小，方法為myChart.resize({width:800,height:600})。任務(wù)資訊3、自適應(yīng)布局技術(shù)

在一些場(chǎng)景中，容器大小改變時(shí)，圖表大小也需要相應(yīng)地改變，比如：圖表容器設(shè)為寬度100%，高度設(shè)為500px，當(dāng)瀏覽器寬度改變時(shí)，想始終保持圖表寬度是頁(yè)面的100%，不會(huì)因?yàn)槿萜鲗挾茸冃《床坏揭徊糠謭D表的內(nèi)容。這種情況就需要監(jiān)聽頁(yè)面的resize事件，獲取瀏覽器大小改變的事件，然后調(diào)用ECharts實(shí)例的resize方法改變圖表的大小，方法代碼如下：子任務(wù)3實(shí)施實(shí)例如下：子任務(wù)3實(shí)施（2）MediaQuery方法為了自適應(yīng)移動(dòng)端尺寸大小，自動(dòng)改變圖形布局，可以使用MediaQuery方法。MediaQuery提供了隨著容器尺寸改變而改變的能力。下面舉例說(shuō)明，子任務(wù)3實(shí)施注意：（1）關(guān)于query。每個(gè)query類似于這樣：{minWidth:200,maxHeight:300,minAspectRatio:1.3}現(xiàn)在支持三個(gè)屬性：width、height、aspectRatio（長(zhǎng)寬比）。每個(gè)屬性都可以加上min或max前綴。比如，minWidth:200表示『大于等于200px寬度』。兩個(gè)屬性一起寫表示『并且』，比如：{minWidth:200,maxHeight:300}表示『大于等于200px寬度，并且小于等于300px高度』。子任務(wù)3實(shí)施自動(dòng)布局要求：1、原始布局，legend放在底部中間，橫向放置；兩個(gè)餅圖左右布局；2、當(dāng)長(zhǎng)寬比大于1時(shí)，legend放在底部中間，橫向放置；兩個(gè)餅圖左右布局；3、當(dāng)長(zhǎng)寬比小于1時(shí)，legend放在底部中間，橫向放置；兩個(gè)餅圖上下布局；4、當(dāng)容器寬度小于500時(shí)，legend放置在右側(cè)中間，縱向放置；兩個(gè)餅圖上下布局。任務(wù)分析某小家電銷售商主要經(jīng)營(yíng)各種風(fēng)扇，其對(duì)自己2021年和2022年各種品牌風(fēng)扇銷量進(jìn)行了統(tǒng)計(jì)，結(jié)果見(jiàn)表3-2-1。利用表3-2-1數(shù)據(jù)，將2021年和2022年各種風(fēng)扇銷量分別繪制玫瑰圖，展示各品牌銷量占比情況。使用自適應(yīng)布局和定位技術(shù)，在默認(rèn)情況下，兩個(gè)玫瑰圖水平排列，當(dāng)圖表容器寬度小于500px時(shí)，兩個(gè)餅圖垂直排列，且圖例位置由底部轉(zhuǎn)到左側(cè)任務(wù)分析本任務(wù)需要繪制兩個(gè)玫瑰圖，并設(shè)置自適應(yīng)圖形容器大小，改變定位和布局。為了方便調(diào)整容器大小，這里使用ECharts官網(wǎng)提供的JavaScript代碼實(shí)現(xiàn)。代碼如下：任務(wù)實(shí)施步驟：第1步：為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om第2步：初始化echarts實(shí)例第3步：加載timelineGDP.js、draggable.js代碼第4步：加載js完后，