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

《數據可視化技術》單元6Echarts基本組件的使用（二）項目介紹本次課開始學習項目二：數碼產品銷售數據ECharts可視化數碼產品主要包括計算機、通信和消費電子產品。對數碼產品銷售數據進行分析和可視化展示，有助于相關人員了解各種產品銷售情況，了解哪些是暢銷產品、哪些是冷門產品，幫助改進營銷和投資。本項目使用ECharts技術完成對數碼產品銷售數據的分析與可視化。01準備活動點名、復習本次課學習內容、學習目標介紹學習內容任務一

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

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