ECharts數(shù)據(jù)可視化課件 第7章 ECharts的高級(jí)使用（下）

第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ī)與第二次模考的語(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)闆](méi)有舊數(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)前系列