《數(shù)據(jù)可視化技術(shù)》 課件 05 Echarts基本組件的使用（一）（二）

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

使用基本組件繪制數(shù)碼產(chǎn)品銷量圖店鋪商家為了直觀地查看各種數(shù)碼產(chǎn)品的銷量情況、進貨量與銷量對比情況，可以借助ECharts開發(fā)數(shù)據(jù)圖表，直觀地展示數(shù)據(jù)統(tǒng)計結(jié)果要使用ECharts進行數(shù)據(jù)可視化，需要搭建ECharts開發(fā)環(huán)境，設(shè)置ECharts常用組件。本任務(wù)將繪制數(shù)碼產(chǎn)品進貨量與銷量對比圖、2017年—2020年各品牌數(shù)碼產(chǎn)品銷量情況對比圖任務(wù)分解：子任務(wù)1搭建ECharts開發(fā)環(huán)境子任務(wù)2繪制數(shù)碼產(chǎn)品進貨量與銷量對比圖（柱狀圖）子任務(wù)3繪制2017年—2020年各品牌數(shù)碼產(chǎn)品銷量情況對比圖（子圖：柱狀圖）學(xué)習(xí)目標1、知識（1）了解Echarts開發(fā)環(huán)境（2）掌握Echarts標題、坐標軸主要參數(shù)設(shè)置（3）了解Echarts數(shù)據(jù)系列的設(shè)置和使用（4）掌握Echarts圖例的設(shè)置2、技能（1）能夠搭建Echarts開發(fā)環(huán)境（2）能夠使用Echarts圖表中的標題、坐標軸、數(shù)據(jù)系列、圖例等組件3、素養(yǎng)（1）嚴謹認真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛國精神；（3）信息檢索能力02發(fā)展活動任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實施子任務(wù)1搭建ECharts開發(fā)環(huán)境任務(wù)分析：本任務(wù)的主要內(nèi)容包括下載并安裝ECharts，安裝開發(fā)工具HBuilderX，使用HBuilderX開發(fā)ECharts項目。1．下載并安裝ECharts2．安裝開發(fā)工具HBuilderX3．使用HBuilderX開發(fā)ECharts項目1．Echarts簡介任務(wù)資訊ECharts，一個純Javascript的圖表庫，依賴輕量級的Canvas類庫Zrender，借助Echarts可以提供基于Web的可視化圖表兼容當前絕大部分瀏覽器（IE8月／10/11

,

Chrome,Firefox,Safari等）官方提供了折線圖、柱狀圖、餅圖、散點圖、地圖、雷達圖、K線圈、箱型圖、熱力圖、關(guān)系圖、矩形樹圖、平行坐標、?；鶊D、漏斗圖、儀表盤等多種圖表1．Echarts簡介任務(wù)資訊ECharts，一個純Javascript的圖表庫，依賴輕量級的Canvas類庫Zrender，借助Echarts可以提供基于Web的可視化圖表兼容當前絕大部分瀏覽器（IE8月／10/11

,

Chrome,Firefox,Safari等）官方提供了折線圖、柱狀圖、餅圖、散點圖、地圖、雷達圖、K線圈、箱型圖、熱力圖、關(guān)系圖、矩形樹圖、平行坐標、?；鶊D、漏斗圖、儀表盤等多種圖表2、Echarts官網(wǎng)Echarts官網(wǎng)：/zh/index.html下載echarts插件（https://echarts.apache.org/zh/download.html）任務(wù)資訊2、安裝開發(fā)工具HhuilderVSCode任務(wù)資訊3、Echarts開發(fā)流程步驟1：引入echarts.js文件步驟2：準備一個呈現(xiàn)圖表的盒子步驟3：初始化echarts實例對象步驟4：準備配置項步驟5：將配置項設(shè)置給echarts實例對象任務(wù)資訊3、第一幅Echarts可視化圖步驟：1、引入echarts.js文件2、準備一個呈現(xiàn)圖標的盒子（div）3、初始化echarts實例對象4、準備配置項5、將配置項設(shè)置給echarts實例對象任務(wù)資訊1、下載echarts插件2、安裝hbuilder或者vscode3、第一幅可視化圖任務(wù)實施子任務(wù)2繪制數(shù)碼產(chǎn)品進貨量與銷量對比圖（柱狀圖）任務(wù)分析：某數(shù)碼專營店專營耳機、音響，其中無線藍牙耳機銷量一直最好。該數(shù)碼專營店2022年上半年無線藍牙耳機的進貨量和銷量數(shù)據(jù)，見表2-1-1。利用上面數(shù)據(jù)繪制聚合柱狀圖，橫軸為月份，縱軸為數(shù)量，顯示標題、圖例任務(wù)資訊（1）標題標題組件通過title進行配置，代碼如下3、Echarts組件3、Echarts組件任務(wù)資訊（2）坐標軸常見的坐標軸是二維直角坐標軸，橫軸（xAxis，即x軸）和縱軸（yAxis，即y軸）兩個組件常被使用，代碼如下：任務(wù)資訊（3）數(shù)據(jù)系列數(shù)據(jù)系列是數(shù)據(jù)的容器，一個圖表可以包含多個數(shù)據(jù)系列，多個系列放在數(shù)組結(jié)構(gòu)中。每個系列由大括號組成，包含若干鍵值對。數(shù)據(jù)系列通過series進行配置，代碼如下：3、Echarts組件任務(wù)資訊（4）圖例圖例組件通過legend進行配置，代碼如下：3、Echarts組件任務(wù)實施實現(xiàn)步驟Echarts最基本的代碼結(jié)構(gòu)引入js文件，DOM容器，初始化對象，準備option，設(shè)置optionOption相關(guān)配置標題坐標軸：x軸，y軸數(shù)據(jù)系列圖例03整合活動總結(jié)、知識點梳理學(xué)習(xí)總結(jié)拓展：1、分別安裝Pycharm和Hbuilder(或VScode)，在相應(yīng)編輯器中編輯Echarts，實現(xiàn)下圖效果拓展任務(wù)《數(shù)據(jù)可視化技術(shù)》單元6Echarts基本組件的使用（二）項目介紹本次課開始學(xué)習(xí)項目二：數(shù)碼產(chǎn)品銷售數(shù)據(jù)ECharts可視化數(shù)碼產(chǎn)品主要包括計算機、通信和消費電子產(chǎn)品。對數(shù)碼產(chǎn)品銷售數(shù)據(jù)進行分析和可視化展示，有助于相關(guān)人員了解各種產(chǎn)品銷售情況，了解哪些是暢銷產(chǎn)品、哪些是冷門產(chǎn)品，幫助改進營銷和投資。本項目使用ECharts技術(shù)完成對數(shù)碼產(chǎn)品銷售數(shù)據(jù)的分析與可視化。01準備活動點名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標介紹學(xué)習(xí)內(nèi)容任務(wù)一

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

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