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

了解事件的概念，能夠說出事件的3要素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

varisSelected=params.selected[];//在控制臺中輸出

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

console.log(params.selected);});知識儲備

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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