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

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

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

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

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

掌握行為事件的使用方法，能夠根據(jù)組件交互行為靈活運用相應的事件學習目標/Target

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

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

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

掌握加載動畫的使用方法，能夠設置加載動畫的顯示或隱藏學習目標/Target

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

先定一個小目標！掌握異步加載數(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請求從服務器加載數(shù)據(jù)$.post(url[,data][,callback][,dataType])通過POST請求從服務器加載數(shù)據(jù)知識儲備2.異步加載數(shù)據(jù)常用的Ajax操作方法的參數(shù)介紹如下。url：表示請求的URL地址。data：為可選參數(shù)，表示請求數(shù)據(jù)的列表。callback：為可選參數(shù)，表示請求成功時執(zhí)行的回調(diào)函數(shù)。dataType：為可選參數(shù)，用于設置服務器返回的數(shù)據(jù)類型，如XML、JSON、HTML、TEXT、JSON等。知識儲備2.異步加載數(shù)據(jù)下面演示$.get()和$.post()方法的使用，示例代碼如下。//$.get()方法$.get('server.html',function(data,status){console.log('服務器返回結果：'+data+'\n請求狀態(tài)：'+status);});//$.post()方法$.post('server.php',{id:1},function(data){console.log('服務器返回結果：'+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ù)的異步加載。

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

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

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

先定一個小目標！掌握動畫配置的相關方法，能夠使用動畫的相關屬性設置圖表初始動畫效果和數(shù)據(jù)更新動畫效果知識儲備3.動畫的配置在繪制圖表的過程中，添加數(shù)據(jù)、更新數(shù)據(jù)、刪除數(shù)據(jù)時可以使用ECharts提供的平移、縮放、變形等形式的過渡動畫，使交互變得更加順滑。通常，開發(fā)人員不需要操心該如何使用動畫，只需要按實際的需求使用setOption()方法更新數(shù)據(jù)，ECharts就會識別出該數(shù)據(jù)與上一次數(shù)據(jù)之間的差異，并自動應用合適的過渡動畫。ECharts的動畫執(zhí)行原理是，每次使用setOption()方法更新數(shù)據(jù)時，都會將數(shù)據(jù)與上次更新的數(shù)據(jù)進行對比，然后根據(jù)對比結果對數(shù)據(jù)執(zhí)行3種操作：添加、更新和刪除。根據(jù)這3種操作，ECharts會分別應用相應的入場動畫、更新動畫和刪除動畫。知識儲備3.動畫的配置數(shù)據(jù)對比是根據(jù)數(shù)據(jù)的名稱來決定的：如果是第一次更新，因為沒有舊數(shù)據(jù)，則所有數(shù)據(jù)都會被執(zhí)行添加。知識儲備3.動畫的配置ECharts提供了一系列屬性用于設置圖表動畫的相關配置，可將這些屬性設置在option頂層中對所有系列和組件生效，也可以設置在每個系列中對當前系列