ECharts數(shù)據(jù)可視化 課件 第6、7章 ECharts的高級使用（上）；ECharts的高級使用（下）_第1頁
ECharts數(shù)據(jù)可視化 課件 第6、7章 ECharts的高級使用（上）；ECharts的高級使用（下）_第2頁
ECharts數(shù)據(jù)可視化 課件 第6、7章 ECharts的高級使用（上）；ECharts的高級使用（下）_第3頁
ECharts數(shù)據(jù)可視化 課件 第6、7章 ECharts的高級使用（上）；ECharts的高級使用（下）_第4頁
ECharts數(shù)據(jù)可視化 課件 第6、7章 ECharts的高級使用（上）；ECharts的高級使用（下）_第5頁
已閱讀5頁，還剩172頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第6章ECharts的高級使用（上）《ECharts數(shù)據(jù)可視化》學習目標/Target掌握顏色主題的使用方法，能夠設置全局顏色主題掌握調(diào)色盤的使用方法，能夠設置圖形、系列的顏色掌握自定義顏色主題的使用方法，能夠根據(jù)需求快速生成配置文件并使用所定義

的顏色主題掌握坐標軸索引的使用方法，能夠設置x、y軸的索引掌握x、y軸偏移的設置方法，能夠設置x、y軸相對于默認位置的偏移學習目標/Target掌握富文本標簽的使用方法，能夠設置文本標簽樣式掌握多圖表聯(lián)動的設置方法，能夠實現(xiàn)多圖表聯(lián)動掌握ECharts顏色主題的設置，能夠更改顏色主題、自定義顏色主題掌握圖表混搭和多圖表聯(lián)動的設置，能夠實現(xiàn)折線圖和柱狀圖的混搭、柱狀圖和

餅圖的混搭、柱狀圖和餅圖的聯(lián)動章節(jié)概述/Summary學習完各種圖表后，讀者已經(jīng)具備繪制簡單圖表的能力了，但是簡單的圖表無法滿足實際開發(fā)中的復雜需求。為了更加靈活地使用圖表，讀者需要深入學習ECharts的高級使用，包括ECharts顏色主題、圖表混搭和多圖表聯(lián)動等。本書將通過第6章和第7章講解ECharts的高級使用，本章講解上半部分的內(nèi)容。目錄/Contents6.16.2ECharts顏色主題圖表混搭和多圖表聯(lián)動ECharts顏色主題6.1更改圖表顏色主題【任務6.1.1】任務需求為了更好地了解全年的用電情況，并為未來規(guī)劃和管理電力資源提供方便，某縣城對2023年的用電情況進行了統(tǒng)計。通過了解用電量情況，確定電力需求和供給之間的差距，并采取有針對性的措施，以確保全縣電力供給的安全、穩(wěn)定和高效。為了更直觀地展示全縣2023年的用電情況，該縣計劃繪制一張圓環(huán)圖。同時，由于ECharts默認的主題不夠美觀，他們希望更換一個更美觀的主題。本任務需要基于某縣城2023年的用電情況繪制vintage主題的圓環(huán)圖。該縣城2023年用電情況（單位：萬千瓦時）如下表所示。用電情況城鎮(zhèn)居民用電鄉(xiāng)村居民用電工業(yè)用電用電量12080300任務需求知識儲備1.顏色主題

先定一個小目標！掌握顏色主題的使用方法，能夠設置全局顏色主題知識儲備1.顏色主題ECharts提供了顏色主題功能。通過顏色主題功能可以使特定主題下的一系列可視化圖表遵循相同的配色方案，幫助開發(fā)者實現(xiàn)圖表樣式的全局統(tǒng)一。例如，當設置dark主題時，整個圖表都會采用深色的配色方案。知識儲備1.顏色主題使用瀏覽器訪問ECharts官方網(wǎng)站，在一級導航欄中單擊“下載”，找到下拉列表中的“主題下載”，如下圖所示。查閱ECharts中的顏色主題步驟1步驟2知識儲備1.顏色主題單擊“主題下載”，跳轉到“主題下載”頁面，如下圖所示。步驟1步驟2查閱ECharts中的顏色主題知識儲備1.顏色主題演示如何使用主題下載主題文件。單擊“macarons”主題名稱上方對應的主題圖片，下載一個名稱為macarons.js的文件，將macarons.js文件保存在D:\ECharts\chapter06目錄下。引用主題文件。創(chuàng)建D:\ECharts\chapter06\theme.html文件，在文件中創(chuàng)建基礎HTML5文檔結構。步驟1步驟2在<head>標簽中引入echarts.js、macarons.js文件。指定主題名稱。步驟3步驟4任務實現(xiàn)保存代碼后，在瀏覽器中打開theme.html文件，macarons主題的圖表的頁面效果如下圖所示。知識儲備1.顏色主題演示主題的切換將主題切換成dark主題，示例代碼如下。varmyChart=echarts.init(document.getElementById('main'),'dark');將主題設置為dark主題任務實現(xiàn)保存代碼后，在瀏覽器中打開theme.html文件，dark主題的圖表的頁面效果如下圖所示。知識儲備2.調(diào)色盤

先定一個小目標！掌握調(diào)色盤的使用方法，能夠設置圖形、系列的顏色知識儲備在ECharts中，通過option對象中的color屬性可以設置調(diào)色盤的顏色列表。當通過color屬性給定了一組顏色后，圖形、系列可以自動從其中選擇顏色。調(diào)色盤包括全局調(diào)色盤和局部調(diào)色盤，全局調(diào)色盤可以被所有系列使用，而局部調(diào)色盤是某個系列專屬的調(diào)色盤。2.調(diào)色盤知識儲備color屬性的值為color數(shù)組，該數(shù)組的設置方式如下。varoption={//全局調(diào)色盤

color:[],series:[{//局部調(diào)色盤

color:[]}]};2.調(diào)色盤知識儲備color屬性的默認值為['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc']。常見的color屬性支持的顏色格式如下。十六進制格式，例如#ccc。RGB格式，例如rgb(128,128,128)。RGBA格式，例如rgba(128,128,128,0.5)。2.調(diào)色盤任務實現(xiàn)

先定一個小目標！掌握ECharts顏色主題的設置，能夠根據(jù)需求更改顏色主題任務實現(xiàn)創(chuàng)建D:\ECharts\chapter06目錄，并使用VSCode編輯器打開該目錄。放入echarts.js文件。下載主題文件。在主題下載頁面下載vintage主題，下載后得到一個名稱為vintage.js的文件，將vintage.js文件保存在D:\ECharts\chapter06目錄下。步驟1步驟2步驟3基于某縣城2023年用電情況繪制vintage主題的圓環(huán)圖步驟4步驟5步驟6步驟7引用主題文件。創(chuàng)建electricity.html文件，在該文件中創(chuàng)建基礎HTML5文檔結構，在<head>標簽中引入echarts.js、vintage.js文件。定義一個指定寬度和高度的父容器。初始化ECharts實例對象并指定主題名稱，準備配置項，并將配置項設置給ECharts實例對象，指定主題名稱。設置圓環(huán)圖的配置項和數(shù)據(jù)。任務實現(xiàn)在瀏覽器中打開electricity.html文件，當鼠標指針移入工業(yè)用電模塊時，某縣城2023年用電情況的圓環(huán)圖效果如下圖所示。自定義圖表顏色主題【任務6.1.2】任務需求“千帆競渡，百舸爭流?！币屔鐣袌鼋?jīng)濟煥發(fā)活力，各行各業(yè)都需要進行公平競爭。而要實現(xiàn)公平競爭，各行各業(yè)需要建立相應的考核標準。電商行業(yè)雖然屬于新興行業(yè)，但它的考核標準十分全面，例如客流量、訂單退貨率等。某電商公司于經(jīng)理希望繪制一張區(qū)域面積圖來展示該電商公司的退貨率，從而幫助公司決策者更好地了解該指標的變化趨勢以及對業(yè)務的影響。本任務需要基于公司1~5月份的訂單退貨率繪制區(qū)域面積圖。經(jīng)理對默認區(qū)域面積圖的顏色不滿意，想要將顏色修改為#328bc5。為了滿足這一需求，可以通過自定義顏色主題來實現(xiàn)。于經(jīng)理整理了公司1~5月份的訂單退貨率，如下表所示。訂單情況1月2月3月4月5月訂單量（單）100096080012001500退單量（單）10090506015訂單退貨率（%）109.3756.2551任務需求知識儲備自定義顏色主題

先定一個小目標！掌握自定義顏色主題的方法，能夠根據(jù)需求快速生成配置文件并使用所定義的顏色主題知識儲備在ECharts中，除了可以使用主題下載頁面中的顏色主題外，還可以自定義顏色主題。自定義顏色主題是通過主題構建工具來實現(xiàn)的。使用主題構建工具可以根據(jù)不同需求快速生成主題配置文件，從而方便地進行定制化開發(fā)。自定義顏色主題知識儲備使用瀏覽器訪問ECharts官方網(wǎng)站，在一級導航欄中單擊“資源”選項，在下拉列表中找到“主題構建工具”，如下圖所示。使用主題構建工具自定義顏色主題自定義顏色主題步驟1步驟3步驟4步驟2知識儲備單擊“主題構建工具”，跳轉到“主題編輯器”頁面，如下圖所示。使用主題構建工具自定義顏色主題自定義顏色主題步驟1步驟3步驟4步驟2知識儲備單擊“主題編輯器”頁面左側的各個模塊，可以配置不同的樣式，從而實現(xiàn)主題的個性化設置。讀者按照項目需求進行主題的配置即可，不需要進行保存操作。使用主題構建工具自定義顏色主題自定義顏色主題步驟1步驟3步驟4步驟2知識儲備自定義主題配置完成后，需要下載配置文件。在“主題編輯器”頁面左側，“功能”模塊默認是展開的。單擊“功能”模塊下的“下載主題”按鈕，“主題下載”頁面如下圖所示。使用主題構建工具自定義顏色主題自定義顏色主題步驟1步驟3步驟4步驟2知識儲備ECharts提供了“JS版本”“JSON版本”格式的文件，默認顯示“JS版本”的文件。在“下載”按鈕的上方，ECharts還提供了具體的使用說明。單擊“JS版本”選項卡中的“下載”按鈕，即可下載已經(jīng)配置好的主題樣式。在HTML文檔中使用該主題樣式時，其使用步驟與ECharts官方提供的主題樣式的使用步驟一致。單擊“JSON版本”選項卡中的“下載”按鈕，即可下載已經(jīng)配置好的主題樣式。在“下載”按鈕上方提供了具體使用步驟的說明。自定義顏色主題知識儲備“JSON版本”主題文件的下載頁面如下圖所示。自定義顏色主題任務實現(xiàn)

先定一個小目標！掌握ECharts顏色主題的使用，能夠根據(jù)需求自定義顏色主題任務實現(xiàn)使用瀏覽器訪問ECharts官方網(wǎng)站，打開“主題編輯器”頁面，單擊左側的“基本配置”模塊，修改主題中第1個主題顏色為#328bc5。單擊“主題編輯器”頁面中的“功能”模塊中的“下載主題”按鈕，打開“主題下載”頁面。單擊“JS版本”選項卡中的“下載”按鈕，即可下載已經(jīng)配置好的主題樣式，下載的文件為customed.js。將customed.js文件保存在D:\ECharts\chapter06目錄下。步驟1步驟2步驟3基于公司1~5月份的訂單退貨率繪制自定義顏色主題的區(qū)域面積圖任務實現(xiàn)創(chuàng)建line.html文件，在該文件中創(chuàng)建基礎HTML5文檔結構并引入echarts.js、customed.js文件。定義一個指定了寬度和高度的父容器。步驟4步驟5初始化ECharts實例對象，準備配置項，將配置項設置給ECharts實例對象。設置區(qū)域面積圖的配置項和數(shù)據(jù)。步驟6步驟7基于1~5月份公司訂單退貨率繪制自定義顏色主題的區(qū)域面積圖任務實現(xiàn)在瀏覽器中打開line.html文件，公司1~5月份的訂單退貨率的區(qū)域面積圖效果如下圖所示。圖表混搭和多圖表聯(lián)動6.2折線圖和柱狀圖的混搭【任務6.2.1】任務需求科學家根據(jù)降水量與蒸發(fā)量的對比，將我國劃分為濕潤地區(qū)、半濕潤地區(qū)、半干旱地區(qū)、干旱地區(qū)4種干濕地區(qū)類型。村支書小蘭希望繪制一張折線圖和柱狀圖的混搭圖表來更好地展示某地區(qū)一年的降水量和蒸發(fā)量。本任務需要基于某地區(qū)一年的降水量和蒸發(fā)量繪制雙y軸的折線圖和柱狀圖混搭圖表。某地區(qū)一年的降水量和蒸發(fā)量（單位：毫米）如下表所示。任務需求月份降水量蒸發(fā)量1月10152月10203月5104月50705月45906月80100月份降水量蒸發(fā)量7月1901308月1401209月206010月304511月603012月2010知識儲備1.坐標軸的索引

先定一個小目標！掌握坐標軸索引的使用方法，能夠設置x、y軸的索引知識儲備ECharts中，單個grid對象最多只能設置兩條x軸、兩條y軸，分別顯示在圖表上下、左右。當在單張圖表中存在多個x軸、y軸的時候，需要使用坐標軸的索引。通過系列的xAxisIndex、yAxisIndex屬性可以分別設置x軸、y軸的索引。通過設置索引可以指定數(shù)據(jù)顯示在哪條橫、縱坐標軸。1.坐標軸的索引知識儲備例如，一張折線圖中存在兩條y軸，分別用于表示不同的類目數(shù)據(jù)，那么就可以使用yAxisIndex屬性。此時，通過設置系列的yAxisIndex屬性，可以選擇將數(shù)據(jù)顯示在具體的哪一條縱坐標軸上。yAxisIndex屬性值為0時表示將數(shù)據(jù)顯示在第1條縱坐標軸上。yAxisIndex屬性值為1時表示將數(shù)據(jù)顯示在第2條縱坐標軸上。1.坐標軸的索引默認情況下，第1條縱坐標軸顯示在圖表的左側，第2條縱坐標軸顯示在圖表的右側，第1條橫坐標軸顯示在圖表的下側，第2條橫坐標軸顯示在圖表的上側。注意知識儲備設置坐標軸索引的示例代碼如下。series:[{yAxisIndex:0,},{yAxisIndex:1}]1.坐標軸的索引知識儲備2.x、y軸的偏移

先定一個小目標！掌握x、y軸偏移的設置方法，能夠設置x、y軸相對于默認位置的偏移知識儲備在ECharts中，當x、y軸的數(shù)量均大于兩條時，為了避免同一位置多條軸重疊在一起，需要通過xAxis、yAxis對象的offset屬性設置x、y軸的偏移。2.x、y軸的偏移知識儲備設置x、y軸的偏移的示例代碼如下。xAxis:[{offset:80},],yAxis:[{offset:80}]2.x、y軸的偏移任務實現(xiàn)

先定一個小目標！掌握圖表混搭的使用，能夠根據(jù)需求實現(xiàn)折線圖和柱狀圖的混搭任務實現(xiàn)基于某地區(qū)一年的降水量和蒸發(fā)量繪制雙y軸的折線圖和柱狀圖混搭圖表創(chuàng)建water.html文件，在該文件中創(chuàng)建基礎HTML5文檔結構并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實例對象，準備配置項，將配置項設置給ECharts實例對象。根據(jù)任務需求給出的表格中的數(shù)據(jù)，定義混合圖表的數(shù)據(jù)。設置混搭圖表的配置項。步驟5步驟3步驟4任務實現(xiàn)在瀏覽器中打開water.html文件，某地區(qū)一年的降水量和蒸發(fā)量的混搭圖表效果如下圖所示。柱狀圖和餅圖的混搭【任務6.2.2】任務需求小亮是一位數(shù)據(jù)分析師，他所在的實習單位經(jīng)常使用ECharts實現(xiàn)數(shù)據(jù)可視化，以便生成滿足工作需求的圖表。他希望繪制一張柱狀圖和餅圖的混搭圖表來展示2023年各圖表使用次數(shù)和主題下載次數(shù)。本任務需要基于各圖表使用次數(shù)和主題下載次數(shù)繪制柱狀圖和餅圖的混搭圖表。各圖表使用次數(shù)（單位：次）如下表所示。圖表使用次數(shù)圖表使用次數(shù)漏斗圖20雷達圖42儀表盤30散點圖35樹圖10柱狀圖53折線圖50餅圖45任務需求主題下載次數(shù)（單位：次）如下表所示。主題使用次數(shù)主題使用次數(shù)深色主題19明亮主題25復古主題41信息圖表主題12馬卡龍主題32羅馬主題8任務需求知識儲備富文本標簽

先定一個小目標！掌握富文本標簽的使用方法，能夠設置文本標簽樣式知識儲備在ECharts中，通過label屬性可以設置旭日圖的某個扇形塊中文本標簽的樣式，如果想要為部分文本標簽定義樣式，則可以通過富文本標簽來實現(xiàn)。富文本標簽知識儲備ECharts

3.7開始支持富文本標簽。富文本標簽能夠實現(xiàn)的效果如下。定制文本塊（文本標簽）整體的樣式（如背景、邊框、陰影等）、位置、旋轉等。為文本塊中的個別片段（文本標簽中的部分文本）定義樣式（如顏色、字體、寬高、背景、陰影等）、對齊方式等。在文本中使用圖片作為圖標或者背景。富文本標簽知識儲備在ECharts中，通過rich屬性定義富文本標簽。使用rich屬性可以在文本塊整體或者文本塊的個別片段中定義不同的樣式。rich屬性可以在系列的label屬性或者系列的data對象的label屬性中設置。rich屬性的值為rich對象，該對象的設置方式如下。series:[{label:{rich:{}}}]富文本標簽知識儲備需要注意的是，在使用rich屬性時，需要在文本中使用“{}”括起樣式名<style_name>和對應的文本內(nèi)容。<style_name>屬性的值為<style_name>對象，該對象的設置方式如下。rich:{<style_name>:{}}富文本標簽知識儲備此外，在label.formatter屬性中，可以通過字符串數(shù)組來設置多個富文本標簽，示例代碼如下。formatter:['{<style_name1>|文本內(nèi)容1}','{<style_name2>|文本內(nèi)容2}']富文本標簽知識儲備formatter屬性的值和rich對象的<style_name>屬性的值須一致。<style_name>對象的常用屬性如下表所示。屬性說明color用于設置文字的顏色，默認值為#ffffontStyle用于設置文字的字體風格，可選值有normal（默認值）、italic、obliquefontWeight用于設置文字字體的粗細，可選值有normal（默認值）、bold、bolder、lighter、100、200、300等fontFamily用于設置文字的字體系列，可選值有sans-serif（默認值）、serif、monospace、Arial等fontSize用于設置文字的字體大小，默認值為12富文本標簽知識儲備>>接上表屬性說明align用于設置文字水平對齊方式，可選值有l(wèi)eft（默認值）、center、rightverticalAlign用于設置文字的垂直對齊方式，可選值有top（默認值）、middle、bottomlineHeight用于設置行高，默認值為12backgroundColor用于設置文字塊背景顏色，可選值有transparent（默認值）、顏色值（例如#123234、red、rgba(0,23,11,0.3)），也可以使用圖片borderColor用于設置文字塊邊框顏色富文本標簽知識儲備>>接上表屬性說明borderWidth用于設置文字塊邊框寬度，默認值為0，表示不描邊borderType用于設置文字塊邊框描邊類型，可選值有solid（默認值）、dashed、dottedborderRadius用于設置文字塊的圓角，默認值為0padding用于設置文字塊的內(nèi)邊距，其值的類型為數(shù)字或數(shù)組，默認值為0textBorderColor用于設置文字本身的描邊顏色textBorderWidth用于設置文字本身的描邊寬度富文本標簽知識儲備在旭日圖中自定義富文本標簽的示例代碼如下。series:[{type:'sunburst',label:{formatter:['{a|這段代碼采用樣式a}'],rich:{a:{color:'red'}}}}]富文本標簽任務實現(xiàn)

先定一個小目標！掌握圖表混搭的使用，能夠根據(jù)需求實現(xiàn)柱狀圖和餅圖的混搭任務實現(xiàn)創(chuàng)建echarts.html文件，在該文件中創(chuàng)建基礎HTML5文檔結構并引入echarts.js文件。定義一個指定了寬度和高度的父容器。初始化ECharts實例對象，準備配置項，并將配置項設置給ECharts實例對象。根據(jù)任務需求給出的各種圖表的使用次數(shù)定義x軸的數(shù)據(jù)。步驟1步驟2步驟3步驟4根據(jù)任務需求給出的各種圖表的類型定義柱狀圖y軸的數(shù)據(jù)。根據(jù)任務需求給出的主題下載次數(shù)定義餅圖的數(shù)據(jù)。步驟5步驟6基于各圖表使用次數(shù)和主題下載次數(shù)繪制柱狀圖和餅圖的混搭圖表設置混搭圖表的配置項。步驟7任務實現(xiàn)在瀏覽器中打開echarts.html文件，各圖表使用次數(shù)和主題下載次數(shù)的混搭圖表效果如下圖所示。柱狀圖和餅圖的聯(lián)動【任務6.2.3】任務需求某公司調(diào)查了江南部分小鎮(zhèn)6月份山茶花、玉蘭花、玫瑰花的銷售情況，并整理了銷售數(shù)據(jù)。負責人小美希望繪制一張柱狀圖和餅圖的聯(lián)動圖表來更好地展示6月份花卉的銷售情況。本任務需要基于各小鎮(zhèn)6月份花卉的銷量繪制柱狀圖和餅圖的聯(lián)動圖表。各小鎮(zhèn)6月份花卉的銷量（單位：支）如下表所示。鄉(xiāng)鎮(zhèn)山茶花玉蘭花玫瑰花總計周莊鎮(zhèn)805330163西塘鎮(zhèn)1006143204烏鎮(zhèn)604236138南潯鎮(zhèn)1057029204任務需求知識儲備多圖表聯(lián)動

先定一個小目標！掌握多圖表聯(lián)動的設置方法，能夠實現(xiàn)多圖表聯(lián)動知識儲備ECharts提供了多圖表聯(lián)動功能，支持直角坐標系下提示框的聯(lián)動。通過調(diào)用echarts對象的connect()方法可以使多個圖表實例對象實現(xiàn)聯(lián)動。connect()方法的參數(shù)為分組id或者一個由多個需要聯(lián)動的ECharts實例對象所組成的數(shù)組。多圖表聯(lián)動知識儲備1.connect()方法參數(shù)為分組id實現(xiàn)myChart1和myChart2兩個ECharts實例對象的聯(lián)動。將ECharts實例對象的group屬性的值設置為相同的，例如group1。通過調(diào)用ECharts對象中的connect()方法，并將分組id設置為group1來連接它們。connect()方法參數(shù)為分組id時實現(xiàn)多圖表聯(lián)動的示例代碼如下。多圖表聯(lián)動myChart1.group='group1'myChart2.group='group1'echarts.connect('group1');知識儲備若想要解除已有的多圖表聯(lián)動，則可以調(diào)用echarts對象的disConnect()方法來實現(xiàn)。該方法的參數(shù)為分組id。解除多圖表聯(lián)動的示例代碼如下。echarts.disConnect('group1');多圖表聯(lián)動如果只需要解除某張圖表的聯(lián)動，可以將該圖表實例的group屬性的值設置為空，示例代碼如下。myChart1.group='';知識儲備2.connect()方法的參數(shù)為數(shù)組與connect()方法的參數(shù)為分組id不同，參數(shù)為數(shù)組時可以實現(xiàn)任意多個圖表實例對象之間的聯(lián)動，而不需要事先給它們分配好分組id，這種方式更加靈活。connect()方法的第一個參數(shù)為一個數(shù)組時，數(shù)組中的元素為需要被聯(lián)動的圖表實例對象。實現(xiàn)多圖表聯(lián)動的示例代碼如下。多圖表聯(lián)動echarts.connect([myChart1,myChart2]);任務實現(xiàn)

先定一個小目標！掌握多圖表聯(lián)動的使用，能夠根據(jù)需求實現(xiàn)柱狀圖和餅圖的聯(lián)動任務實現(xiàn)基于各小鎮(zhèn)6月份花卉銷量繪制柱狀圖和餅圖的聯(lián)動圖表創(chuàng)建flower.html文件，在該文件中創(chuàng)建基礎HTML5文檔結構并引入echarts.js文件。定義兩個指定了寬度和高度的父容器，分別為柱狀圖和餅圖指定DOM大小。步驟1步驟2初始化餅圖的ECharts實例對象，準備配置項，并將配置項設置給ECharts實例對象。根據(jù)任務需求給出的表格中的數(shù)據(jù)，定義餅圖的數(shù)據(jù)。設置餅圖的配置項。步驟5步驟3步驟4任務實現(xiàn)基于6月份花卉銷售表繪制柱狀圖和餅圖的聯(lián)動圖表初始化柱狀圖的ECharts實例對象，準備配置項，將配置項設置給ECharts實例對象。根據(jù)任務需求給出的表格中的數(shù)據(jù)，定義柱狀圖的數(shù)據(jù)。步驟6步驟7設置柱狀圖的配置項。在<head>標簽中設置兩個圖表的樣式，讓其顯示在一行。編寫代碼實現(xiàn)餅圖和柱狀圖的聯(lián)動。步驟10步驟8步驟9任務實現(xiàn)在瀏覽器中打開flower.html文件，各小鎮(zhèn)6月份花卉的銷量的聯(lián)動圖表效果如下圖所示。任務實現(xiàn)當鼠標指針移入餅圖中烏鎮(zhèn)扇區(qū)時，圖表效果如下圖所示。本章小結本章主要對顏色主題、圖表混搭和多圖表聯(lián)動進行了詳細講解，首先講解了ECharts顏色主題，包括更改圖表顏色主題、自定義圖表顏色主題；然后講解了圖表混搭和多圖表聯(lián)動，包括折線圖和柱狀圖的混搭、柱狀圖和餅圖的混搭、柱狀圖和餅圖的聯(lián)動。通過對本章的學習，讀者可以對ECharts顏色主題、圖表混搭和多圖表聯(lián)動有一個整體的認識，能夠根據(jù)不同的實際需求運用合適的顏色主題和圖表進行數(shù)據(jù)可視化。本章小結第7章ECharts的高級使用（下）《ECharts數(shù)據(jù)可視化》學習目標/Target

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

掌握鼠標事件的使用方法，能夠實現(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.用戶鼠標操作事件

先定一個小目標！掌握鼠標事件的使用方法，能夠實現(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ù)的格式轉換為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.增量動畫為了全面分析初三年級第二次?？汲煽儯M一步統(tǒng)一認識、明確思路、查漏補缺、鼓舞士

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論