ECharts數(shù)據(jù)可視化 課件 第7、8章 ECharts的高級(jí)使用（下）、項(xiàng)目實(shí)戰(zhàn)-電商數(shù)據(jù)可視化系統(tǒng)

第7章ECharts的高級(jí)使用（下）《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target

了解事件的概念，能夠說(shuō)出事件的3要素

掌握鼠標(biāo)事件的使用方法，能夠?qū)崿F(xiàn)單擊、雙擊、鼠標(biāo)指針移入、鼠標(biāo)指針移出

等效果掌握?qǐng)D表自適應(yīng)的設(shè)置方法，能夠使用resize()方法實(shí)現(xiàn)圖表的自適應(yīng)效果

掌握行為事件的使用方法，能夠根據(jù)組件交互行為靈活運(yùn)用相應(yīng)的事件學(xué)習(xí)目標(biāo)/Target

掌握代碼觸發(fā)ECharts中組件的行為的設(shè)置方法，能夠調(diào)用dispatchAction()方法

模擬觸發(fā)圖表的某些行為

掌握LiveServer擴(kuò)展的使用設(shè)置方法，能夠創(chuàng)建本地服務(wù)器來(lái)預(yù)覽網(wǎng)頁(yè)掌握異步加載數(shù)據(jù)的設(shè)置方法，能夠通過(guò)Ajax操作方法加載圖表數(shù)據(jù)

掌握加載動(dòng)畫的使用方法，能夠設(shè)置加載動(dòng)畫的顯示或隱藏學(xué)習(xí)目標(biāo)/Target

掌握增量動(dòng)畫的使用方法，能夠通過(guò)setOption()方法實(shí)現(xiàn)數(shù)據(jù)改變的動(dòng)畫效果掌握動(dòng)畫配置的相關(guān)方法，能夠使用動(dòng)畫的相關(guān)屬性設(shè)置圖表初始動(dòng)畫效果和數(shù)

據(jù)更新動(dòng)畫效果掌握事件與行為的使用方法，能夠根據(jù)不同需求使用鼠標(biāo)事件、行為事件

掌握數(shù)據(jù)異步加載的設(shè)置方法與動(dòng)畫的使用方法，能夠異步加載圖表的數(shù)

據(jù)，并為圖表設(shè)置動(dòng)畫章節(jié)概述/Summary通過(guò)對(duì)第6章的學(xué)習(xí)，大家應(yīng)該已經(jīng)掌握了ECharts主題樣式的設(shè)置，以及圖表混搭和多圖表聯(lián)動(dòng)，可以實(shí)現(xiàn)復(fù)雜動(dòng)態(tài)數(shù)據(jù)可視化和多圖表聯(lián)動(dòng)效果。接下來(lái)，本章將繼續(xù)講解ECharts中的高級(jí)使用，如事件與行為、數(shù)據(jù)異步加載與動(dòng)畫等內(nèi)容。通過(guò)對(duì)本章的學(xué)習(xí)，讀者可以實(shí)現(xiàn)更加復(fù)雜的圖表交互效果。目錄/Contents7.17.2事件與行為數(shù)據(jù)異步加載與動(dòng)畫事件與行為7.1鼠標(biāo)事件【任務(wù)7.1.1】任務(wù)需求小芳是一家糖果店的老板，主要銷售不同品牌和口味的糖果。她想要知道哪些糖果的銷售額高，哪些糖果的銷售利潤(rùn)低，通過(guò)分析這些數(shù)據(jù)，從而更好地了解店鋪的運(yùn)作狀況，并對(duì)未來(lái)的營(yíng)銷策略做出更加準(zhǔn)確的決策。為此，她統(tǒng)計(jì)了某月店鋪中熱銷的6款產(chǎn)品的銷量、產(chǎn)量和利潤(rùn)數(shù)據(jù)。本任務(wù)需要完成以下內(nèi)容。根據(jù)給定數(shù)據(jù)繪制柱狀圖和折線圖的混搭圖表。當(dāng)單擊不同產(chǎn)品的“銷量”“產(chǎn)量”“利潤(rùn)”柱條后，會(huì)彈出對(duì)應(yīng)的提示框，該提示框包含所在柱條的基本數(shù)據(jù)信息。產(chǎn)品銷量、產(chǎn)量和利潤(rùn)如下表所示。產(chǎn)品銷量（kg）產(chǎn)量（kg）利潤(rùn)（元）薄荷糖901101800牛軋?zhí)?0402800話梅糖12201000榴蓮糖18221000橙子糖20251900巧克力糖45503200任務(wù)需求知識(shí)儲(chǔ)備1.事件概述

先定一個(gè)小目標(biāo)！了解事件的概念，能夠說(shuō)出事件的3要素知識(shí)儲(chǔ)備事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，例如單擊、鼠標(biāo)指針經(jīng)過(guò)等都屬于事件。響應(yīng)某個(gè)事件的函數(shù)稱為事件處理函數(shù)，也可稱為事件處理程序、事件句柄。1.事件概述知識(shí)儲(chǔ)備ECharts中的事件有3個(gè)要素，分別是事件源、事件類型和事件處理函數(shù)。觸發(fā)事件的元素。例如，用戶鼠標(biāo)操作事件的事件源通常是行為發(fā)生時(shí)鼠標(biāo)指針焦點(diǎn)所在的圖形區(qū)域。事件源使圖表產(chǎn)生交互效果的行為動(dòng)作對(duì)應(yīng)的事件種類。例如，單擊事件的事件類型為click。事件類型事件觸發(fā)后為了實(shí)現(xiàn)相應(yīng)的圖表交互效果而執(zhí)行的代碼。事件處理函數(shù)事件三要素1.事件概述知識(shí)儲(chǔ)備2.用戶鼠標(biāo)操作事件

先定一個(gè)小目標(biāo)！掌握鼠標(biāo)事件的使用方法，能夠?qū)崿F(xiàn)單擊、雙擊、鼠標(biāo)指針移入、鼠標(biāo)指針移出等效果知識(shí)儲(chǔ)備用戶在頁(yè)面中使用鼠標(biāo)指針進(jìn)行的一些操作所觸發(fā)的事件，稱為用戶鼠標(biāo)操作事件，簡(jiǎn)稱為鼠標(biāo)事件。事件類型說(shuō)明click在目標(biāo)元素上，單擊時(shí)觸發(fā)，不能通過(guò)鍵盤觸發(fā)dbclick在目標(biāo)元素上，雙擊時(shí)觸發(fā)mouseup在目標(biāo)元素上，鼠標(biāo)按鍵被釋放時(shí)觸發(fā)，不能通過(guò)鍵盤觸發(fā)mousedown在目標(biāo)元素上，鼠標(biāo)按鍵（左鍵或右鍵）被按下時(shí)觸發(fā)。不能通過(guò)鍵盤觸發(fā)mouseover鼠標(biāo)指針移入目標(biāo)元素上方時(shí)觸發(fā)，當(dāng)前元素和其子元素都觸發(fā)mousemove鼠標(biāo)指針在目標(biāo)元素內(nèi)部移動(dòng)時(shí)不斷觸發(fā)，不能通過(guò)鍵盤觸發(fā)mouseout鼠標(biāo)指針移出目標(biāo)元素上方時(shí)觸發(fā)，當(dāng)前元素和其子元素都觸發(fā)globalout鼠標(biāo)指針移出整張圖表時(shí)觸發(fā)contextmenu右擊目標(biāo)元素時(shí)觸發(fā)，即右擊事件，此時(shí)會(huì)彈出一個(gè)快捷菜單2.用戶鼠標(biāo)操作事件ECharts支持許多常見的鼠標(biāo)事件，如下表所示。知識(shí)儲(chǔ)備2.用戶鼠標(biāo)操作事件注意：在目標(biāo)元素上單擊后，會(huì)先后觸發(fā)mousedown和mouseup事件，如果其中一個(gè)事件被取消，那么click事件就不會(huì)被觸發(fā)。在目標(biāo)元素上雙擊后，會(huì)觸發(fā)dbclick事件，如果直接或間接取消了click事件，那么dbclick事件也不會(huì)被觸發(fā)。知識(shí)儲(chǔ)備在ECharts中，所有的鼠標(biāo)事件都包含一個(gè)參數(shù)params。params是一個(gè)包含單擊圖形的數(shù)據(jù)信息的對(duì)象，用于描述事件發(fā)生時(shí)的上下文信息，params對(duì)象的基本屬性如下表所示。屬性說(shuō)明componentType當(dāng)前單擊的圖形元素所屬的組件名稱，可選值為series、markLine、markPoint、timeLine等seriesType系列類型，可選值為line、bar、pie等。當(dāng)componentType屬性的值為series時(shí)才有意義seriesIndex系列索引，系列在傳入的option.series的index中。當(dāng)componentType屬性的值為series時(shí)才有意義seriesName系列名稱。當(dāng)componentType屬性的值為series時(shí)才有意義name數(shù)據(jù)名、類目名dataIndex數(shù)據(jù)項(xiàng)索引，數(shù)據(jù)在傳入的data數(shù)組的index中data傳入的原始數(shù)據(jù)項(xiàng)2.用戶鼠標(biāo)操作事件知識(shí)儲(chǔ)備>>接上表屬性說(shuō)明dataType系列對(duì)應(yīng)的數(shù)據(jù)類型，只在含有nodeData（節(jié)點(diǎn)數(shù)據(jù)）和edgeData（邊數(shù)據(jù)）兩種data的圖表中有意義，此時(shí)，dataType的值為node（節(jié)點(diǎn)）或edge（邊），表示當(dāng)前單擊在node還是edge上。當(dāng)圖表中只有一種data時(shí)，dataType無(wú)意義value傳入的數(shù)據(jù)值color數(shù)據(jù)圖形的顏色，當(dāng)componentType屬性的值為series時(shí)才有意義2.用戶鼠標(biāo)操作事件注意：其他圖表可能會(huì)包含部分附加屬性，例如餅圖包含percent屬性。表示百分比，具體介紹參見各個(gè)圖表類型的回調(diào)函數(shù)的params對(duì)象。知識(shí)儲(chǔ)備監(jiān)聽鼠標(biāo)事件：調(diào)用ECharts實(shí)例對(duì)象的on()方法為目標(biāo)元素綁定事件處理函數(shù)，從而實(shí)現(xiàn)鼠標(biāo)事件的監(jiān)聽。myChart.on(eventType,query,handler);2.用戶鼠標(biāo)操作事件ECharts實(shí)例對(duì)象監(jiān)聽的事件類型觸發(fā)事件的目標(biāo)元素綁定的事件處理函數(shù)知識(shí)儲(chǔ)備取消已有的事件監(jiān)聽：調(diào)用ECharts實(shí)例對(duì)象的off()方法為目標(biāo)元素取消事件監(jiān)聽。myChart.off(eventType,query,handler);2.用戶鼠標(biāo)操作事件ECharts實(shí)例對(duì)象取消監(jiān)聽的事件類型取消監(jiān)聽的目標(biāo)元素取消綁定的事件處理函數(shù)知識(shí)儲(chǔ)備下面演示如何監(jiān)聽單擊事件，示例代碼如下。myChart.on('click',function(params){console.log(params);});2.用戶鼠標(biāo)操作事件下面演示如何取消單擊事件的監(jiān)聽，示例代碼如下。myChart.off('click');知識(shí)儲(chǔ)備3.圖表自適應(yīng)

先定一個(gè)小目標(biāo)！掌握?qǐng)D表自適應(yīng)的設(shè)置方法，能夠使用resize()方法實(shí)現(xiàn)圖表的自適應(yīng)效果為什么要設(shè)置圖表的自適應(yīng)？知識(shí)儲(chǔ)備3.圖表自適應(yīng)ECharts中的圖表不具有自適應(yīng)特性，即圖表被初次渲染后不會(huì)隨著瀏覽器窗口尺寸的變化而變化。若想使圖表可以隨瀏覽器窗口尺寸的改版而改版，則可以在window對(duì)象的resize事件處理函數(shù)中調(diào)用ECharts實(shí)例對(duì)象的resize()方法。知識(shí)儲(chǔ)備3.圖表自適應(yīng)知識(shí)儲(chǔ)備3.圖表自適應(yīng)下面演示如何實(shí)現(xiàn)圖表的自適應(yīng)效果，示例代碼如下。functionhandleResize(){myChart.resize();}window.addEventListener('resize',handleResize);取消圖表自適應(yīng)效果的示例代碼如下。window.removeEventListener('resize',handleResize);任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握鼠標(biāo)事件的使用，能夠根據(jù)需求繪制柱狀圖和折線圖混搭圖表任務(wù)實(shí)現(xiàn)創(chuàng)建D:\ECharts\chapter07目錄，并使用VSCode編輯器打開該目錄。放入echarts.js文件。創(chuàng)建product.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2步驟3基于產(chǎn)品銷量、產(chǎn)量和利潤(rùn)繪制柱狀圖和折線圖的混搭圖表初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置柱狀圖和折線圖的配置項(xiàng)和數(shù)據(jù)。實(shí)現(xiàn)柱狀圖的自適應(yīng)效果。實(shí)現(xiàn)單擊不同產(chǎn)品的“銷量”“產(chǎn)量”“利潤(rùn)”后，彈出對(duì)應(yīng)的提示框。步驟4步驟8步驟5步驟6步驟7任務(wù)實(shí)現(xiàn)在瀏覽器中打開product.html文件，產(chǎn)品銷量、產(chǎn)量和利潤(rùn)的柱狀圖和折線圖混搭圖表效果如下圖所示。任務(wù)實(shí)現(xiàn)單擊產(chǎn)品榴蓮糖所在的“產(chǎn)量”柱條，彈出提示框的效果如下圖所示。任務(wù)實(shí)現(xiàn)單擊紅色線框區(qū)域，會(huì)彈出對(duì)應(yīng)的榴蓮糖的產(chǎn)量系列的相關(guān)內(nèi)容，由于提示框中的內(nèi)容較多，會(huì)自動(dòng)出現(xiàn)滑塊。這里給出提示框中的全部?jī)?nèi)容，如下圖所示。行為事件【任務(wù)7.1.2】任務(wù)需求影響人類平均預(yù)期壽命的因素多樣且復(fù)雜，包括氣候環(huán)境、生活方式、遺傳因素、社會(huì)因素和醫(yī)療條件等方面。某機(jī)構(gòu)研究了某城市人均壽命的現(xiàn)狀以及影響因素，并通過(guò)收集相應(yīng)的樣本，進(jìn)一步分析了影響平均預(yù)期壽命的因素，提出了相應(yīng)的建議，為日后的研究提供借鑒和參考。本任務(wù)需要完成以下內(nèi)容。根據(jù)給定數(shù)據(jù)繪制餅圖，展示不同因素的占比情況，在高亮顯示的扇區(qū)上顯示提示框組件。鼠標(biāo)指針未移入時(shí)，餅圖自動(dòng)循環(huán)高亮顯示各扇區(qū)。鼠標(biāo)指針移入時(shí)，取消自動(dòng)循環(huán)高亮顯示各扇區(qū)，只高亮顯示鼠標(biāo)指針移入的扇區(qū)。鼠標(biāo)指針移出后，恢復(fù)自動(dòng)循環(huán)高亮顯示各扇區(qū)。任務(wù)需求影響健康、壽命的各類因素如下表所示。氣候環(huán)境生活方式遺傳因素社會(huì)因素醫(yī)療條件7%60%15%10%8%知識(shí)儲(chǔ)備1.組件交互的行為事件

先定一個(gè)小目標(biāo)！掌握行為事件的使用方法，能夠根據(jù)組件交互行為靈活運(yùn)用相應(yīng)的事件如何理解行為事件？知識(shí)儲(chǔ)備1.組件交互的行為事件在ECharts中，大多數(shù)組件交互行為都會(huì)觸發(fā)相應(yīng)的事件。通過(guò)監(jiān)聽不同的組件行為觸發(fā)事件，可以實(shí)現(xiàn)各種交互操作，如選中一個(gè)數(shù)據(jù)項(xiàng)、改變圖表的顯示范圍等。ECharts支持多種行為事件，在組件、圖表狀態(tài)發(fā)生某種業(yè)務(wù)狀態(tài)遷移時(shí)觸發(fā)。知識(shí)儲(chǔ)備1.組件交互的行為事件知識(shí)儲(chǔ)備1.組件交互的行為事件常見的行為事件如下表所示。事件類型說(shuō)明legendselectchanged當(dāng)用戶切換圖例的選中狀態(tài)時(shí)觸發(fā)legendselected當(dāng)用戶選中某個(gè)圖例時(shí)觸發(fā)legendunselected當(dāng)用戶取消選中某個(gè)圖例時(shí)觸發(fā)legendscroll當(dāng)圖例滾動(dòng)時(shí)觸發(fā)dataviewchanged當(dāng)用戶在工具欄中修改數(shù)據(jù)視圖時(shí)觸發(fā)magictypechanged當(dāng)用戶在工具欄中切換動(dòng)態(tài)類型時(shí)觸發(fā)知識(shí)儲(chǔ)備1.組件交互的行為事件>>接上表事件類型說(shuō)明restore當(dāng)用戶執(zhí)行重置操作后觸發(fā)，可以利用setOption()方法重新繪制圖表rendered當(dāng)圖表完成渲染后觸發(fā)，可用于監(jiān)聽渲染完成事件并對(duì)圖表進(jìn)行后續(xù)操作finished當(dāng)圖表的動(dòng)畫或漸進(jìn)渲染結(jié)束后觸發(fā)，可用于監(jiān)聽動(dòng)畫完成事件并對(duì)圖表進(jìn)行后續(xù)操作知識(shí)儲(chǔ)備1.組件交互的行為事件VSrendered事件rendered事件在圖表初次渲染完成后觸發(fā)，表示圖表的DOM元素已經(jīng)渲染完畢，并且圖表數(shù)據(jù)已經(jīng)被成功渲染到指定的DOM元素中。finished事件finished事件在圖表交互（如用鼠標(biāo)滾輪縮放、拖動(dòng)等）完成后觸發(fā)，表示圖表的交互操作已經(jīng)完成，并且圖表數(shù)據(jù)已經(jīng)被成功更新為最新狀態(tài)。知識(shí)儲(chǔ)備1.組件交互的行為事件下面演示如何監(jiān)聽用戶單擊切換圖例開關(guān)時(shí)的行為事件，示例代碼如下。myChart.on('legendselectchanged',function(params){//獲取單擊圖例的選中狀態(tài)

varisSelected=params.selected[];//在控制臺(tái)中輸出

console.log((isSelected?'選中了':'取消選中了')+'圖例'+);//打印所有圖例的狀態(tài)

console.log(params.selected);});知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握代碼觸發(fā)ECharts中組件的行為的設(shè)置方法，能夠調(diào)用dispatchAction()方法模擬觸發(fā)圖表的某些行為2.代碼觸發(fā)ECharts中組件的行為知識(shí)儲(chǔ)備2.代碼觸發(fā)ECharts中組件的行為前面講到的legendselectchanged行為事件是由用戶單擊切換圖例開關(guān)時(shí)觸發(fā)的，除此之外，在ECharts中，還可以通過(guò)調(diào)用dispatchAction()方法模擬觸發(fā)圖表的某些行為，例如模擬用戶單擊切換圖例開關(guān)時(shí)的行為、圖例選中時(shí)的行為、用戶觸發(fā)高亮顯示的行為或顯示提示框的行為等。知識(shí)儲(chǔ)備2.代碼觸發(fā)ECharts中組件的行為下面演示如何模擬觸發(fā)高亮顯示的行為和顯示提示框的行為，示例代碼如下。//觸發(fā)高亮顯示的行為myChart.dispatchAction({type:'highlight',seriesIndex:0,dataIndex:1});//觸發(fā)顯示提示框的行為myChart.dispatchAction({type:'showTip',seriesIndex:0,dataIndex:1})

先定一個(gè)小目標(biāo)！掌握行為事件的使用方法，能夠根據(jù)需求繪制餅圖并完成交互效果任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建pieHighlight.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2基于影響健康、壽命的各類因素繪制餅圖并實(shí)現(xiàn)交互效果初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。根據(jù)任務(wù)需求給出的表格中的數(shù)據(jù)定義餅圖的數(shù)據(jù)。設(shè)置餅圖的配置項(xiàng)，完成餅圖的繪制并在高亮顯示的扇區(qū)上顯示提示框組件。步驟5步驟3步驟4實(shí)現(xiàn)鼠標(biāo)指針未移入時(shí)，餅圖自動(dòng)循環(huán)高亮顯示各扇區(qū)的效果。實(shí)現(xiàn)鼠標(biāo)指針移入時(shí)，取消自動(dòng)循環(huán)高亮顯示，只高亮顯示鼠標(biāo)指針選中的扇區(qū)。實(shí)現(xiàn)鼠標(biāo)指針移出后恢復(fù)自動(dòng)循環(huán)高亮顯示各扇區(qū)。步驟8步驟6步驟7任務(wù)實(shí)現(xiàn)瀏覽器中打開pieHighlight.html文件，當(dāng)鼠標(biāo)指針移入“生活方式”所在的扇區(qū)時(shí)，影響健康、壽命的各類因素的餅圖效果如下圖所示。該餅圖顯示了影響健康、壽命的5個(gè)因素，當(dāng)鼠標(biāo)指針移入不同顏色的扇區(qū)時(shí)顯示當(dāng)前扇區(qū)代表的因素的占比情況。數(shù)據(jù)異步加載與動(dòng)畫7.2異步加載圖表的數(shù)據(jù)【任務(wù)7.2.1】任務(wù)需求黨的二十大報(bào)告指出：“推動(dòng)戰(zhàn)略性新興產(chǎn)業(yè)融合集群發(fā)展，構(gòu)建新一代信息技術(shù)、人工智能、生物技術(shù)、新能源、新材料、高端裝備、綠色環(huán)保等一批新的增長(zhǎng)引擎”。為深入貫徹落實(shí)國(guó)家發(fā)展戰(zhàn)略，培養(yǎng)先進(jìn)技術(shù)人才，某學(xué)院開設(shè)了大數(shù)據(jù)技術(shù)、軟件技術(shù)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、人工智能技術(shù)應(yīng)用、云計(jì)算技術(shù)應(yīng)用、移動(dòng)應(yīng)用開發(fā)等專業(yè)。該學(xué)院2023年的各專業(yè)的招生人數(shù)（單位：人）如下表所示。大數(shù)據(jù)技術(shù)軟件技術(shù)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)人工智能技術(shù)應(yīng)用云計(jì)算技術(shù)應(yīng)用移動(dòng)應(yīng)用開發(fā)400500424235203156任務(wù)需求任務(wù)需求考慮到招生數(shù)據(jù)量較多時(shí)，如果一次性加載全部數(shù)據(jù)，則頁(yè)面會(huì)因?yàn)閿?shù)據(jù)量過(guò)多而變慢。實(shí)際項(xiàng)目開發(fā)中往往都是前后端分離的，前端展示頁(yè)面，后端提供數(shù)據(jù)。本任務(wù)需要通過(guò)JSON文件模擬一個(gè)后端API提供數(shù)據(jù)，在前端顯示餅圖時(shí)，以異步加載的方式從后端API獲取數(shù)據(jù)。知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展

先定一個(gè)小目標(biāo)！掌握LiveServer擴(kuò)展的使用方法，能夠創(chuàng)建本地服務(wù)器來(lái)預(yù)覽網(wǎng)頁(yè)為什么使用LiveServer擴(kuò)展？知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展當(dāng)開發(fā)需要異步加載數(shù)據(jù)的頁(yè)面時(shí)，如果使用瀏覽器直接打開本地的HTML文件，數(shù)據(jù)會(huì)加載失敗，這是因?yàn)闉g覽器阻止了Ajax請(qǐng)求。為此，我們需要借助VSCode編輯器的LiveServer擴(kuò)展來(lái)解決這個(gè)問(wèn)題。知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展使用LiveServer擴(kuò)展可以創(chuàng)建一個(gè)本地服務(wù)器來(lái)預(yù)覽網(wǎng)頁(yè)，此時(shí)網(wǎng)頁(yè)能夠正確地發(fā)送Ajax請(qǐng)求。本地服務(wù)器的默認(rèn)端口是5500，用戶也可以自行設(shè)置端口號(hào)。使用LiveServer擴(kuò)展運(yùn)行程序時(shí)，如果對(duì)代碼進(jìn)行了修改，不需要重新刷新瀏覽器即可更新頁(yè)面內(nèi)容。知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展下面講解如何安裝LiveServer擴(kuò)展。知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展打開VSCode編輯器，在頁(yè)面中單擊左邊欄中的第5個(gè)圖標(biāo)“”，然后在搜索框中輸入關(guān)鍵詞“l(fā)iveserver”找到該擴(kuò)展，單擊“安裝”按鈕進(jìn)行安裝，如下圖所示。知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展若要通過(guò)LiveServer擴(kuò)展運(yùn)行HTML5文件，在代碼編輯區(qū)域任意位置右擊，在彈出的快捷菜單中選擇“OpenwithLiveServer”，如下圖所示。知識(shí)儲(chǔ)備1.LiveServer擴(kuò)展執(zhí)行上述操作后，就會(huì)彈出瀏覽器頁(yè)面并自動(dòng)打開HTML5文件。瀏覽器自動(dòng)打開的網(wǎng)址為http://:5500/chapter07/subject.html，解釋如下。http://表示協(xié)議。表示主機(jī)地址，也就是LiveServer創(chuàng)建的本地網(wǎng)站服務(wù)器的IP地址。5500表示端口，即訪問(wèn)服務(wù)器中的5500端口。/chapter07/subject.html是文件資源在服務(wù)器中對(duì)應(yīng)的路徑。知識(shí)儲(chǔ)備2.異步加載數(shù)據(jù)

先定一個(gè)小目標(biāo)！掌握異步加載數(shù)據(jù)的使用方法，能夠通過(guò)Ajax操作方法加載圖表數(shù)據(jù)知識(shí)儲(chǔ)備2.異步加載數(shù)據(jù)使用jQuery提供的Ajax操作方法加載加載數(shù)據(jù)。若要使用jQuery，需要先在HTML文檔中引入jQuery。<scriptsrc="./jquery-3.3.1.js"></script>下面列舉jQuery中常用的Ajax操作方法，如下表所示。方法說(shuō)明$.get(url[,data][,callback][,dataType])通過(guò)GET請(qǐng)求從服務(wù)器加載數(shù)據(jù)$.post(url[,data][,callback][,dataType])通過(guò)POST請(qǐng)求從服務(wù)器加載數(shù)據(jù)知識(shí)儲(chǔ)備2.異步加載數(shù)據(jù)常用的Ajax操作方法的參數(shù)介紹如下。url：表示請(qǐng)求的URL地址。data：為可選參數(shù)，表示請(qǐng)求數(shù)據(jù)的列表。callback：為可選參數(shù)，表示請(qǐng)求成功時(shí)執(zhí)行的回調(diào)函數(shù)。dataType：為可選參數(shù)，用于設(shè)置服務(wù)器返回的數(shù)據(jù)類型，如XML、JSON、HTML、TEXT、JSON等。知識(shí)儲(chǔ)備2.異步加載數(shù)據(jù)下面演示$.get()和$.post()方法的使用，示例代碼如下。//$.get()方法$.get('server.html',function(data,status){console.log('服務(wù)器返回結(jié)果：'+data+'\n請(qǐng)求狀態(tài)：'+status);});//$.post()方法$.post('server.php',{id:1},function(data){console.log('服務(wù)器返回結(jié)果：'+data+'\n請(qǐng)求狀態(tài)：'+status);});知識(shí)儲(chǔ)備2.異步加載數(shù)據(jù)使用done()方法執(zhí)行請(qǐng)求成功的代碼，該方法的參數(shù)為一個(gè)方法，done()方法的語(yǔ)法格式如下。$.get(url).done(function(){//執(zhí)行請(qǐng)求成功的代碼});在調(diào)用Ajax操作方法后，需要將獲取的后端數(shù)據(jù)的格式轉(zhuǎn)換為ECharts可以處理的數(shù)據(jù)格式，然后將數(shù)據(jù)傳遞給ECharts實(shí)例中的setOption()方法，實(shí)現(xiàn)圖表數(shù)據(jù)的異步加載。

先定一個(gè)小目標(biāo)！掌握數(shù)據(jù)異步加載的使用方法，能夠根據(jù)需求完成異步加載圖表的數(shù)據(jù)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建subject.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件和jquery-3.1.1.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2使用異步加載獲取各專業(yè)的招生人數(shù)新建data\pieDate.json文件，定義餅圖的數(shù)據(jù)。初始化ECharts實(shí)例對(duì)象。實(shí)現(xiàn)數(shù)據(jù)異步加載。步驟5步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開subject.html文件，各專業(yè)的招生人數(shù)的餅圖效果如下圖所示。該餅圖顯示了6個(gè)專業(yè)的招生人數(shù)，當(dāng)鼠標(biāo)指針移入不同顏色的扇區(qū)時(shí)顯示當(dāng)前區(qū)域代表的專業(yè)招生的人數(shù)和占比情況。為圖表設(shè)置動(dòng)畫【任務(wù)7.2.2】任務(wù)需求隨著經(jīng)濟(jì)的發(fā)展，人們的生活質(zhì)量不斷提高，健康意識(shí)也越來(lái)越強(qiáng)。水果作為日常生活中不可或缺的食物，含有豐富的營(yíng)養(yǎng)成分，人們對(duì)水果的需求也在不斷增加。小張分析了水果的市場(chǎng)情況，發(fā)現(xiàn)售賣水果的利潤(rùn)非?？捎^。為此，他開了一家水果店，他習(xí)慣將水果的進(jìn)價(jià)和售價(jià)記錄在表格中，以便對(duì)價(jià)格進(jìn)行比較。在經(jīng)營(yíng)了一段時(shí)間后，他整理了某月店內(nèi)各類水果的進(jìn)價(jià)及售價(jià)，想要以圖表的形式展示該月各類水果的進(jìn)價(jià)和售價(jià)數(shù)據(jù)。任務(wù)需求某月店內(nèi)的各類水果的進(jìn)價(jià)及售價(jià)（單位：元/kg）如下表所示。水果名稱進(jìn)價(jià)售價(jià)蘋果610香蕉1012蜜橘4.26獼猴桃6.48西瓜7.510葡萄1018櫻桃4055雪梨810檸檬912任務(wù)需求小張還想將當(dāng)月參加“愛心助農(nóng)”活動(dòng)時(shí)購(gòu)買的沃柑的單價(jià)和售價(jià)數(shù)據(jù)添加到圖表中，已知沃柑的進(jìn)價(jià)為10元/kg、售價(jià)為10元/kg。本任務(wù)需要完成以下內(nèi)容。根據(jù)給定數(shù)據(jù)繪制柱狀圖。為柱狀圖添加初始動(dòng)畫效果，動(dòng)畫時(shí)長(zhǎng)為3秒，緩動(dòng)效果為linear。開發(fā)一個(gè)增加數(shù)據(jù)的功能，在頁(yè)面添加一個(gè)“增加數(shù)據(jù)”按鈕，單擊該按鈕可以將沃柑的數(shù)據(jù)（進(jìn)價(jià)10元/kg，售價(jià)10元/kg）添加到柱狀圖中。為柱狀圖添加數(shù)據(jù)后更新動(dòng)畫效果，動(dòng)畫時(shí)長(zhǎng)為0.5s，緩動(dòng)效果為quinticOut。知識(shí)儲(chǔ)備1.加載動(dòng)畫

先定一個(gè)小目標(biāo)！掌握加載動(dòng)畫的使用方法，能夠設(shè)置加載動(dòng)畫的顯示或隱藏知識(shí)儲(chǔ)備1.加載動(dòng)畫ECharts中默認(rèn)提供了一個(gè)簡(jiǎn)單的加載動(dòng)畫，只需要在合適的時(shí)機(jī)顯示或隱藏加載動(dòng)畫即可，數(shù)據(jù)異步加載的時(shí)間過(guò)長(zhǎng)時(shí)，可以使用加載動(dòng)畫。myChart.showLoading();實(shí)現(xiàn)方式：通常在數(shù)據(jù)加載前，調(diào)用showLoading()方法顯示加載動(dòng)畫，在數(shù)據(jù)加載完成后，再調(diào)用hideLoading()方法隱藏加載的動(dòng)畫。顯示加載動(dòng)畫的示例代碼如下。知識(shí)儲(chǔ)備1.加載動(dòng)畫myChart.hideLoading();隱藏加載動(dòng)畫的示例代碼如下。知識(shí)儲(chǔ)備2.增量動(dòng)畫

先定一個(gè)小目標(biāo)！掌握增量動(dòng)畫的使用方法，能夠通過(guò)setOption()方法實(shí)現(xiàn)數(shù)據(jù)改變的動(dòng)畫效果知識(shí)儲(chǔ)備2.增量動(dòng)畫當(dāng)圖表已在頁(yè)面中顯示，圖表中的數(shù)據(jù)又發(fā)生變化時(shí)，圖表由于數(shù)據(jù)變化而產(chǎn)生的動(dòng)畫效果稱為增量動(dòng)畫。實(shí)現(xiàn)方式：通過(guò)setOption()方法實(shí)現(xiàn)，setOption()方法可以設(shè)置多個(gè)。varoption={series:[{type:'bar',data:[80,83,93,92,88,90]}]};下面通過(guò)定時(shí)器模擬數(shù)據(jù)的改變演示多個(gè)setOption()方法的設(shè)置，示例代碼如下。知識(shí)儲(chǔ)備2.增量動(dòng)畫option&&myChart.setOption(option);setTimeout(()=>{varoption={series:[{data:[88,80,95,93,82,94]}]};option&&myChart.setOption(option);},2000);>>接上頁(yè)代碼注意：新的option配置項(xiàng)和初始的option配置項(xiàng)之間存在相互整合的關(guān)系，因此在設(shè)置新的option配置項(xiàng)時(shí)，只需考慮到變化的部分，不用重復(fù)設(shè)置配置項(xiàng)。知識(shí)儲(chǔ)備2.增量動(dòng)畫下面通過(guò)一個(gè)案例演示增量動(dòng)畫的使用。知識(shí)儲(chǔ)備2.增量動(dòng)畫為了全面分析初三年級(jí)第二次?？汲煽?jī)，進(jìn)一步統(tǒng)一認(rèn)識(shí)、明確思路、查漏補(bǔ)缺、鼓舞士氣，以便學(xué)生全力備戰(zhàn)和沖刺中考，現(xiàn)將第一次?？嫉恼Z(yǔ)文成績(jī)與第二次?？嫉恼Z(yǔ)文成績(jī)進(jìn)行對(duì)比，先根據(jù)第一次?？嫉某煽?jī)繪制柱狀圖，當(dāng)單擊“查看第二次?？汲煽?jī)”按鈕時(shí)，再根據(jù)第二次模擬的成績(jī)重新繪制柱狀圖。創(chuàng)建changeData.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2演示增量動(dòng)畫的使用初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置柱狀圖的配置項(xiàng)和數(shù)據(jù)。在<body>標(biāo)簽中添加一個(gè)button元素，用于實(shí)現(xiàn)按鈕效果。步驟5步驟3步驟42.增量動(dòng)畫知識(shí)儲(chǔ)備為button元素綁定單擊事件，實(shí)現(xiàn)單擊“查看第二次模考成績(jī)”按鈕時(shí)，重新繪制柱狀圖。步驟6在瀏覽器中打開changeData.html文件，初始柱狀圖效果如下圖所示。該柱狀圖顯示了最高成績(jī)?yōu)?3，最低成績(jī)?yōu)?0，平均分為87.67。知識(shí)儲(chǔ)備2.增量動(dòng)畫單擊“查看第二次模考成績(jī)”按鈕柱狀圖效果如下圖所示。該柱狀圖顯示了最高成績(jī)?yōu)?5，最低成績(jī)?yōu)?0，平均分為88.67。知識(shí)儲(chǔ)備2.增量動(dòng)畫知識(shí)儲(chǔ)備3.動(dòng)畫的配置

先定一個(gè)小目標(biāo)！掌握動(dòng)畫配置的相關(guān)方法，能夠使用動(dòng)畫的相關(guān)屬性設(shè)置圖表初始動(dòng)畫效果和數(shù)據(jù)更新動(dòng)畫效果知識(shí)儲(chǔ)備3.動(dòng)畫的配置在繪制圖表的過(guò)程中，添加數(shù)據(jù)、更新數(shù)據(jù)、刪除數(shù)據(jù)時(shí)可以使用ECharts提供的平移、縮放、變形等形式的過(guò)渡動(dòng)畫，使交互變得更加順滑。通常，開發(fā)人員不需要操心該如何使用動(dòng)畫，只需要按實(shí)際的需求使用setOption()方法更新數(shù)據(jù)，ECharts就會(huì)識(shí)別出該數(shù)據(jù)與上一次數(shù)據(jù)之間的差異，并自動(dòng)應(yīng)用合適的過(guò)渡動(dòng)畫。ECharts的動(dòng)畫執(zhí)行原理是，每次使用setOption()方法更新數(shù)據(jù)時(shí)，都會(huì)將數(shù)據(jù)與上次更新的數(shù)據(jù)進(jìn)行對(duì)比，然后根據(jù)對(duì)比結(jié)果對(duì)數(shù)據(jù)執(zhí)行3種操作：添加、更新和刪除。根據(jù)這3種操作，ECharts會(huì)分別應(yīng)用相應(yīng)的入場(chǎng)動(dòng)畫、更新動(dòng)畫和刪除動(dòng)畫。知識(shí)儲(chǔ)備3.動(dòng)畫的配置數(shù)據(jù)對(duì)比是根據(jù)數(shù)據(jù)的名稱來(lái)決定的：如果是第一次更新，因?yàn)闆]有舊數(shù)據(jù)，則所有數(shù)據(jù)都會(huì)被執(zhí)行添加。知識(shí)儲(chǔ)備3.動(dòng)畫的配置ECharts提供了一系列屬性用于設(shè)置圖表動(dòng)畫的相關(guān)配置，可將這些屬性設(shè)置在option頂層中對(duì)所有系列和組件生效，也可以設(shè)置在每個(gè)系列中對(duì)當(dāng)前系列生效。屬性說(shuō)明animation用于設(shè)置是否開啟動(dòng)畫，默認(rèn)值為true，表示開啟動(dòng)畫，設(shè)為false表示關(guān)閉動(dòng)畫animationThreshold用于設(shè)置是否開啟動(dòng)畫的閾值，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫，默認(rèn)值為2000animationDuration用于設(shè)置初始動(dòng)畫的時(shí)長(zhǎng)，默認(rèn)值為1000，單位為毫秒animationEasing用于設(shè)置初始動(dòng)畫的緩動(dòng)效果，默認(rèn)值為cubicOut設(shè)置動(dòng)畫的相關(guān)屬性如下表所示。知識(shí)儲(chǔ)備3.動(dòng)畫的配置>>接上表屬性說(shuō)明animationDelay用于設(shè)置初始動(dòng)畫的延遲時(shí)間，默認(rèn)值為0，單位為毫秒animationDurationUpdate用于設(shè)置數(shù)據(jù)更新動(dòng)畫的時(shí)長(zhǎng)，默認(rèn)值為300，單位為毫秒animationEasingUpdate用于設(shè)置數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果，默認(rèn)值為cubicOutanimationDelayUpdate用于設(shè)置數(shù)據(jù)更新動(dòng)畫的延遲時(shí)間，默認(rèn)值為0，單位為毫秒如果想要關(guān)閉動(dòng)畫，則將animation屬性的值設(shè)置為false即可，如果想要單獨(dú)關(guān)閉入場(chǎng)動(dòng)畫或者數(shù)據(jù)更新動(dòng)畫，可以通過(guò)單獨(dú)將動(dòng)畫的時(shí)長(zhǎng)設(shè)置為0來(lái)實(shí)現(xiàn)。知識(shí)儲(chǔ)備3.動(dòng)畫的配置ECharts為animationEasing、animationEasingUpdate屬性提供了很多可選值用于實(shí)現(xiàn)不同的緩動(dòng)功能，各可選值及對(duì)應(yīng)的緩動(dòng)功能如下圖所示。

先定一個(gè)小目標(biāo)！掌握動(dòng)畫的使用方法，能夠根據(jù)需求為圖表設(shè)置動(dòng)畫任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建animation.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2基于各類水果的進(jìn)價(jià)及售價(jià)繪制柱狀圖初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。根據(jù)任務(wù)需求給出的表格中的水果名稱定義x軸的數(shù)據(jù)。根據(jù)任務(wù)需求給出的表格中的進(jìn)價(jià)和售價(jià)定義y軸的數(shù)據(jù)。步驟5步驟3步驟4設(shè)置柱狀圖的配置項(xiàng)和數(shù)據(jù)，添加初始動(dòng)畫效果。步驟6在<body>標(biāo)簽中添加一個(gè)button元素，用于實(shí)現(xiàn)按鈕效果。步驟7為button元素綁定單擊事件，實(shí)現(xiàn)單擊“增加數(shù)據(jù)”時(shí)，重新繪制柱狀圖并添加數(shù)據(jù)更新動(dòng)畫效果。步驟8任務(wù)實(shí)現(xiàn)瀏覽器中打開animation.html文件，各類水果的進(jìn)價(jià)及售價(jià)的柱狀圖效果如下圖所示。為柱狀圖加載初始數(shù)據(jù)時(shí)添加了動(dòng)畫效果，運(yùn)行文件可以體驗(yàn)初始動(dòng)畫效果。任務(wù)實(shí)現(xiàn)單擊“增加數(shù)據(jù)”按鈕后的柱狀圖效果如下圖所示。從圖中可以看出，單擊“增加數(shù)據(jù)”按鈕后，柱狀圖中顯示出了沃柑的信息。本章小結(jié)本章主要對(duì)事件與行為、數(shù)據(jù)異步加載與動(dòng)畫進(jìn)行了詳細(xì)講解，首先講解了事件與行為，包括鼠標(biāo)事件和組件交互行為觸發(fā)的行為事件；然后講解了數(shù)據(jù)異步加載與動(dòng)畫，包括異步加載圖表的數(shù)據(jù)和為圖表設(shè)置動(dòng)畫。通過(guò)對(duì)本章的學(xué)習(xí)，讀者能夠掌握事件與行為、數(shù)據(jù)異步加載與動(dòng)畫的基本使用，能夠根據(jù)實(shí)際需要實(shí)現(xiàn)豐富的、可交互的可視化圖表。本章小結(jié)第8章項(xiàng)目實(shí)戰(zhàn)——電商數(shù)據(jù)可視化系統(tǒng)《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target熟悉項(xiàng)目的整體結(jié)構(gòu)，能夠歸納項(xiàng)目的整體結(jié)構(gòu)掌握用戶數(shù)量及同比增長(zhǎng)率圖表的開發(fā)，能夠獨(dú)立完成代碼掌握青年消費(fèi)者的需求分布圖表的開發(fā)，能夠獨(dú)立完成代碼掌握用戶狀態(tài)分布圖表的開發(fā)，能夠獨(dú)立完成代碼掌握用戶分類圖表的開發(fā)，能夠獨(dú)立完成代碼學(xué)習(xí)目標(biāo)/Target掌握年度銷售額圖表的開發(fā)，能夠獨(dú)立完成代碼掌握月度銷售額圖表的開發(fā)，能夠獨(dú)立完成代碼掌握平臺(tái)轉(zhuǎn)化率圖表的開發(fā)，能夠獨(dú)立完成代碼掌握各地區(qū)銷售分析圖表的開發(fā)，能夠獨(dú)立完成代碼學(xué)習(xí)目標(biāo)/Target掌握單日訂單量圖表的開發(fā)，能夠獨(dú)立完成代碼掌握不同訂單狀態(tài)下的訂單數(shù)量圖表的開發(fā)，能夠獨(dú)立完成代碼掌握各地區(qū)訂單量分布情況圖表的開發(fā)，能夠獨(dú)立完成代碼掌握訂單配送方式分布情況圖表的開發(fā)，能夠獨(dú)立完成代碼章節(jié)概述/Summary通過(guò)之前的學(xué)習(xí)，相信讀者已經(jīng)能夠熟練掌握如何使用ECharts繪制圖表。為了幫助讀者更深入地理解與應(yīng)用ECharts，本章將帶領(lǐng)讀者綜合運(yùn)用所學(xué)知識(shí)開發(fā)一個(gè)電商數(shù)據(jù)可視化系統(tǒng)，詳細(xì)講解電商數(shù)據(jù)可視化系統(tǒng)的開發(fā)過(guò)程。目錄/Contents8.18.28.3項(xiàng)目介紹項(xiàng)目初始化項(xiàng)目功能開發(fā)項(xiàng)目介紹8.18.1項(xiàng)目介紹

先定一個(gè)小目標(biāo)！熟悉項(xiàng)目的整體結(jié)構(gòu)，能夠歸納項(xiàng)目的整體結(jié)構(gòu)本項(xiàng)目是一個(gè)電商數(shù)據(jù)可視化系統(tǒng)，該系統(tǒng)通過(guò)數(shù)據(jù)可視化的方式展示電商數(shù)據(jù)，包括銷售額、訂單量、用戶狀態(tài)分布等，從而幫助平臺(tái)管理人員更好地了解電商業(yè)務(wù)并做出更明智的決策。8.1項(xiàng)目介紹8.1項(xiàng)目介紹本項(xiàng)目的開發(fā)環(huán)境具體如下。操作系統(tǒng)：Windows10或更高版本。運(yùn)行環(huán)境：Node.js16.17.0。前端框架：Vue.js3.2.47。數(shù)據(jù)可視化工具：ECharts5.4.1。瀏覽器：Chrome。編輯器：VisualStudioCode。本項(xiàng)目主要分為以下3個(gè)模塊。用戶分析模塊銷售分析模塊訂單分析模塊8.1項(xiàng)目介紹用戶分析模塊用于展示用戶信息，用戶分析模塊的頁(yè)面效果如下圖所示。8.1項(xiàng)目介紹1.用戶分析模塊用戶分析模塊中的4張圖表用于從不同角度展示用戶數(shù)據(jù)，接下來(lái)對(duì)各張圖表進(jìn)行簡(jiǎn)要介紹。用戶數(shù)量及同比增長(zhǎng)率：使用柱狀圖和折線圖的混搭圖表，展示該電商平臺(tái)在2020—2023年期間用戶數(shù)量逐年遞增的趨勢(shì)，同時(shí)也能反映同比增長(zhǎng)率的變化趨勢(shì)。青年消費(fèi)者的需求分布：通過(guò)餅圖展示該電商平臺(tái)中青年消費(fèi)者的需求分布。用戶狀態(tài)分布：通過(guò)圓環(huán)圖展示該電商平臺(tái)中活躍用戶和流失用戶的分布情況。用戶分類：通過(guò)圓環(huán)圖展示該電商平臺(tái)中不同分類的用戶數(shù)量。8.1項(xiàng)目介紹1.用戶分析模塊銷售分析模塊用于展示商品銷售信息，銷售分析模塊頁(yè)面效果如下圖所示。8.1項(xiàng)目介紹2.銷售分析模塊銷售分析模塊中的4張圖表從不同角度展示商品銷售數(shù)據(jù)，接下來(lái)對(duì)各張圖表進(jìn)行簡(jiǎn)要介紹。年度銷售額：通過(guò)儀表盤展示該電商平臺(tái)年度銷售額的達(dá)成率。月度銷售額：通過(guò)橫向柱狀圖展示該電商平臺(tái)中5月份不同類目商品的實(shí)際銷售額和預(yù)計(jì)銷售額。平臺(tái)轉(zhuǎn)化率：通過(guò)漏斗圖展示該電商平臺(tái)中訪客的轉(zhuǎn)化率，轉(zhuǎn)化率為20%。各地區(qū)銷售分析：通過(guò)雷達(dá)圖展示該電商平臺(tái)中不同地區(qū)的銷售能力，可以非常清晰地展示各個(gè)地區(qū)的銷售情況。8.1項(xiàng)目介紹2.銷售分析模塊訂單分析模塊用于展示該電商平臺(tái)中訂單數(shù)據(jù)，訂單分析模塊頁(yè)面效果如下圖所示。8.1項(xiàng)目介紹3.訂單分析模塊訂單分析模塊中的4張圖表從不同角度展示電商平臺(tái)中的訂單數(shù)據(jù)，接下來(lái)對(duì)各張圖表進(jìn)行簡(jiǎn)要介紹。單日訂單量：通過(guò)區(qū)域面積圖展示該電商平臺(tái)4月26日不同時(shí)間的訂單數(shù)量。不同訂單狀態(tài)下的訂單數(shù)量：通過(guò)柱狀圖展示該電商平臺(tái)中最近5天不同訂單狀態(tài)下的訂單數(shù)量，可以直觀地反映訂單狀態(tài)。各地區(qū)訂單量占比情況：通過(guò)南丁格爾圖展示該電商平臺(tái)4月27日各地區(qū)的訂單數(shù)量。訂單配送方式分布情況：通過(guò)餅圖展示該電商平臺(tái)4月28日訂單配送方式分布情況。8.1項(xiàng)目介紹3.訂單分析模塊項(xiàng)目初始化8.28.2項(xiàng)目初始化

先定一個(gè)小目標(biāo)！掌握項(xiàng)目初始化，能夠使用初始項(xiàng)目完成項(xiàng)目的搭建8.2項(xiàng)目初始化從本書的配套資源中找到本章項(xiàng)目的初始版本，將文件解壓并保存在一個(gè)指定目錄下，例如D:\ECharts\chapter08\shop，將該目錄作為項(xiàng)目目錄。演示如何使用初始項(xiàng)目步驟1步驟28.2項(xiàng)目初始化使用VSCode編輯器打開項(xiàng)目目錄，項(xiàng)目目錄結(jié)構(gòu)如右圖所示。步驟1步驟2演示如何使用初始項(xiàng)目8.2項(xiàng)目初始化下面對(duì)項(xiàng)目目錄結(jié)構(gòu)中的主要文件進(jìn)行介紹。src\components\subcomponents\Commodity.vue：用于展示銷售分析模塊的相關(guān)信息。src\components\subcomponents\Order.vue：用于展示訂單分析模塊的內(nèi)容。src\components\subcomponents\User.vue：用于展示用戶分析模塊的內(nèi)容。src\components\Index.vue：用于展示整體頁(yè)面結(jié)構(gòu)。src\router\router.js：用于配置路由信息。8.2項(xiàng)目初始化在VSCode編輯器的菜單欄中選擇“終端”-“新建終端”命令，然后在新的終端下執(zhí)行如下命令，啟動(dòng)項(xiàng)目。npmrundev項(xiàng)目啟動(dòng)后，可以使用URL地址:5173/進(jìn)行訪問(wèn)。8.2項(xiàng)目初始化在瀏覽器中訪問(wèn):5173/，初始頁(yè)面效果如下圖所示。項(xiàng)目功能開發(fā)8.3用戶數(shù)量及同比增長(zhǎng)率【任務(wù)8.3.1】任務(wù)需求要想經(jīng)營(yíng)好一個(gè)電商平臺(tái)，必不可少的是對(duì)其數(shù)據(jù)的掌握。因此，優(yōu)秀的電商平臺(tái)必須定期對(duì)過(guò)往的用戶數(shù)據(jù)進(jìn)行詳細(xì)分析。小夏是某電商平臺(tái)的運(yùn)營(yíng)工作人員，她整理了該電商平臺(tái)2020—2023年的用戶數(shù)量及同比增長(zhǎng)率。本任務(wù)需要基于用戶數(shù)量及同比增長(zhǎng)率繪制柱狀圖和折線圖的混搭圖表。用戶數(shù)量及同比增長(zhǎng)率如下表所示。年份（年）2020202120222023用戶數(shù)量（人）10000250005000074000同比增長(zhǎng)率（%）015010048任務(wù)需求任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握用戶數(shù)量及同比增長(zhǎng)率圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\User.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。從該文件的<style>標(biāo)簽中找到本頁(yè)面樣式的相關(guān)代碼。從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼，實(shí)現(xiàn)用戶數(shù)量及同比增長(zhǎng)率圖表的制作。步驟1步驟2步驟3基于用戶數(shù)量及同比增長(zhǎng)率繪制柱狀圖和折線圖的混搭圖表青年消費(fèi)者的需求分布【任務(wù)8.3.2】任務(wù)需求在經(jīng)濟(jì)學(xué)中有一個(gè)觀點(diǎn)——需求決定供給。想要成為一個(gè)成功的賣家，必須明確、清晰地了解買家的需求，這樣才能獲得成功并達(dá)到自己的目標(biāo)。因此，賣家可以根據(jù)不同年齡層消費(fèi)者的需求和偏好來(lái)選擇出售的產(chǎn)品，以提高轉(zhuǎn)化率和銷售量。小夏整理了青年消費(fèi)者的需求分布。本任務(wù)需要基于青年消費(fèi)者的需求分布繪制餅圖。青年消費(fèi)者的需求分布如下表所示。數(shù)據(jù)名衣食住行用戶數(shù)量（人）12000320001000020000任務(wù)需求任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握青年消費(fèi)者的需求分布圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\User.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼實(shí)現(xiàn)青年消費(fèi)者中需求分布圖表的制作。步驟1步驟2基于青年消費(fèi)者的需求分布繪制餅圖用戶狀態(tài)分布【任務(wù)8.3.3】任務(wù)需求電商平臺(tái)的用戶管理目標(biāo)之一是保留老用戶和發(fā)掘新用戶。在吸引新用戶的同時(shí)，還需要提升他們的活躍度，使他們能夠持續(xù)創(chuàng)造價(jià)值。一旦用戶活躍度下降，用戶就會(huì)逐漸遠(yuǎn)離，并最終流失。因此，可以將用戶狀態(tài)分為活躍用戶和流失用戶兩種。小夏整理了2023年的用戶狀態(tài)分布。本任務(wù)需要基于用戶狀態(tài)分布繪制圓環(huán)圖。用戶狀態(tài)分布如下表所示。數(shù)據(jù)名活躍用戶流失用戶用戶數(shù)量（人）5700017000任務(wù)需求任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握用戶狀態(tài)分布圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\User.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼實(shí)現(xiàn)用戶狀態(tài)分布圖表的制作。步驟1步驟2基于用戶狀態(tài)分布繪制圓環(huán)圖用戶分類【任務(wù)8.3.4】任務(wù)需求在用戶關(guān)系管理中，用戶細(xì)分是一個(gè)重要的理論組成部分，也是企業(yè)為了滿足用戶多樣化需求，以及高效率完成任務(wù)而進(jìn)行的合理化規(guī)劃。在電商平臺(tái)上，用戶細(xì)分體現(xiàn)在平臺(tái)根據(jù)用戶的需求、愛好等因素對(duì)用戶進(jìn)行分類，并提供針對(duì)性的措施，以確保不同用戶都能夠獲得優(yōu)質(zhì)服務(wù)，并提高用戶對(duì)平臺(tái)的歸屬感。本任務(wù)需要基于用戶分類繪制圓環(huán)圖。用戶分類如下表所示。數(shù)據(jù)名買家賣家合伙人用戶數(shù)量（人）669007000100任務(wù)需求任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握用戶分類圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\User.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼實(shí)現(xiàn)用戶分類圖表的制作。步驟1步驟2基于用戶分類繪制圓環(huán)圖年度銷售額【任務(wù)8.3.5】任務(wù)需求小正是某電商平臺(tái)的財(cái)務(wù)人員，整理了該電商平臺(tái)截至5月份的年度銷售額為120萬(wàn)元，目標(biāo)年度銷售額為300萬(wàn)元。實(shí)際年度銷售額除以目標(biāo)年度銷售額為40%，該數(shù)據(jù)為實(shí)際年度銷售額達(dá)成率。本任務(wù)需要基于實(shí)際年度銷售額和目標(biāo)年度銷售額繪制儀表盤。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握年度銷售額圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。填寫的實(shí)際年度銷售額和目標(biāo)年度銷售額。從該文件的<style>標(biāo)簽中找到本頁(yè)面樣式的相關(guān)代碼。步驟1步驟2步驟3基于實(shí)際年度銷售額和目標(biāo)年度銷售額繪制儀表盤從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼實(shí)現(xiàn)年度銷售額圖表的制作。步驟3月度銷售額【任務(wù)8.3.6】任務(wù)需求電商平臺(tái)月度銷售額是指該平臺(tái)某月售出的所有商品的總收入。如果今年5月份某電商平臺(tái)售出了10萬(wàn)元的商品，而且發(fā)現(xiàn)該月的銷售額比4月份的增長(zhǎng)了，那么說(shuō)明5月份的銷售情況非常好，用戶可能在促銷活動(dòng)中購(gòu)買了更多的商品。反之，如果銷售額下降了，則可能需要分析原因并采取相應(yīng)措施來(lái)提高銷售額，例如增大促銷力度、優(yōu)化用戶體驗(yàn)等。本任務(wù)需要基于5月份不同類目商品的銷售額繪制橫向柱狀圖。5月份不同類目商品的銷售額（單位：萬(wàn)元）如下表所示。類目實(shí)際銷售額預(yù)計(jì)銷售額類目實(shí)際銷售額預(yù)計(jì)銷售額潮流女裝1815針織衫68時(shí)尚男裝1715寶寶奶粉78羽絨服1415休閑零食58生鮮果蔬108四季茗茶48運(yùn)動(dòng)鞋68---任務(wù)需求任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握月度銷售額圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼實(shí)現(xiàn)月度銷售額圖表的制作。步驟1步驟2基于5月份不同類目商品的銷售額繪制橫向柱狀圖平臺(tái)轉(zhuǎn)化率【任務(wù)8.3.7】任務(wù)需求在電商平臺(tái)中，商家經(jīng)常會(huì)在平臺(tái)上開展一些營(yíng)銷活動(dòng)來(lái)引入新流量，提升店鋪知名度。但是很多商家沒有注意到一個(gè)重要指標(biāo)，那就是平臺(tái)轉(zhuǎn)化率，即訪問(wèn)者與購(gòu)買者之間的比例，商家需要認(rèn)識(shí)到流量的增多不代表購(gòu)買力的增強(qiáng)，在這一階段，商家更應(yīng)該穩(wěn)中求勝，不斷優(yōu)化自身策略，以使平臺(tái)轉(zhuǎn)化率升高，從而獲得更好的銷量。本任務(wù)需要基于平臺(tái)轉(zhuǎn)化率繪制漏斗圖。某公司近期的平臺(tái)轉(zhuǎn)化率如下表所示。數(shù)據(jù)名訪客收藏加購(gòu)訂購(gòu)用戶數(shù)量（人）1000600200轉(zhuǎn)化率（%）1006020任務(wù)需求任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握平臺(tái)轉(zhuǎn)化率圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼實(shí)現(xiàn)平臺(tái)轉(zhuǎn)化率圖表的制作。步驟1步驟2基于平臺(tái)轉(zhuǎn)化率繪制漏斗圖各地區(qū)銷售分析【任務(wù)8.3.8】任務(wù)需求“凡事豫則立，不豫則廢”。制定正確的決策必須先進(jìn)行詳細(xì)的前期調(diào)研。只有深入調(diào)查和準(zhǔn)確分析，才能胸有成竹地制定出有助于合理配置資源的決策，實(shí)現(xiàn)利潤(rùn)最大化。某電商平臺(tái)管理層已初步?jīng)Q定調(diào)整公司戰(zhàn)略，計(jì)劃優(yōu)化各地區(qū)代理資源，為此需要進(jìn)行具體情況的調(diào)研。小夏整理了2023年的各地區(qū)銷售分析。本任務(wù)基于各地區(qū)銷售分析繪制雷達(dá)圖。各地區(qū)銷售分析（單位：萬(wàn)元）如下表所示。數(shù)據(jù)名東北西北華南華中西南銷售額5060807666任務(wù)需求任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握各地區(qū)銷售分析圖表的開發(fā)，能夠獨(dú)立完成代碼任務(wù)實(shí)現(xiàn)打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標(biāo)簽中找到本任務(wù)的注釋，在注釋的下一行定義一個(gè)圖表容器。從該文件的<script>標(biāo)簽中找到本任務(wù)頁(yè)面邏輯的相關(guān)代碼，在此基礎(chǔ)上編寫代碼實(shí)現(xiàn)各地區(qū)銷售分析圖表的制作。步驟1步驟2基于各地區(qū)銷售分析繪制雷達(dá)圖單日訂單量【任務(wù)8.3.9】任務(wù)需求為了在日益復(fù)雜的市場(chǎng)環(huán)境中