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

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

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

symbol:

圖元的圖形類別。

symbolSize:圖元的大小。

color:

圖元的顏色。任務實施

colorAlpha:

圖元的顏色的透明度。

opacity:

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

colorLightness:

顏色的明暗度。

colorSaturation:

顏色的飽和度。

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

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