ECharts數(shù)據(jù)可視化課件 第2章 折線圖和餅圖

第2章折線圖和餅圖《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target

熟悉引入并配置ECharts的方法，能夠歸納引入并配置ECharts的步驟

掌握坐標(biāo)軸組件的使用方法，能夠設(shè)置圖表的x軸、y軸掌握系列組件、標(biāo)題組件、圖例組件的使用方法，能夠設(shè)置圖表的系列、標(biāo)題、

圖例掌握數(shù)據(jù)堆疊的使用方法，能夠設(shè)置數(shù)據(jù)堆疊掌握折線圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等學(xué)習(xí)目標(biāo)/Target掌握區(qū)域填充樣式的設(shè)置方法，能夠設(shè)置區(qū)域填充樣式

掌握網(wǎng)格組件、提示框組件、工具欄組件的使用方法，能夠設(shè)置圖表的網(wǎng)格、

提示框、工具欄

掌握數(shù)據(jù)集組件的使用方法，能夠使用數(shù)據(jù)集定義數(shù)據(jù)掌握平滑曲線圖的設(shè)置方法，能夠?qū)D表設(shè)置為平滑曲線圖掌握餅圖半徑的使用方法，能夠設(shè)置餅圖的半徑學(xué)習(xí)目標(biāo)/Target掌握餅圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等掌握南丁格爾圖的設(shè)置方法，能夠?qū)D表設(shè)置為南丁格爾圖

掌握折線圖的繪制，能夠完成基礎(chǔ)折線圖、堆疊折線圖、區(qū)域面積圖、

堆疊面積折線圖、階梯折線圖和平滑曲線圖等的繪制掌握餅圖的繪制，能夠完成基礎(chǔ)餅圖和南丁格爾圖的繪制章節(jié)概述/Summary在日常生活中，我們經(jīng)常使用圖表來整理和分析數(shù)據(jù)，以便得出更好的結(jié)論。在眾多圖表類型中，折線圖和餅圖相對(duì)比較簡(jiǎn)單，更適合ECharts初學(xué)者學(xué)習(xí)。因此，本書將以折線圖和餅圖作為切入點(diǎn)，幫助讀者打好基礎(chǔ)，為后續(xù)學(xué)習(xí)其他圖表提供支撐。本章將針對(duì)如何使用ECharts繪制折線圖和餅圖進(jìn)行詳細(xì)講解。目錄/Contents2.12.2常見的折線圖常見的餅圖常見的折線圖2.1繪制基礎(chǔ)折線圖【任務(wù)2.1.1】任務(wù)需求最近，某互聯(lián)網(wǎng)公司出現(xiàn)了利潤下降的情況。為了找出原因，該公司的領(lǐng)導(dǎo)決定使用用戶瀏覽量這一指標(biāo)進(jìn)行調(diào)查，并據(jù)此制定相關(guān)決策。會(huì)議結(jié)束后，運(yùn)營總監(jiān)整理了最近一周內(nèi)的用戶瀏覽量報(bào)表。他希望繪制一個(gè)基礎(chǔ)折線圖來更好地展示最近一周內(nèi)的用戶瀏覽量的變化情況。本任務(wù)需要基于最近一周內(nèi)用戶瀏覽量繪制基礎(chǔ)折線圖。最近一周內(nèi)用戶瀏覽量（單位：次）如下表所示。星期瀏覽量周一20000周二22000周三25000周四20000任務(wù)需求星期瀏覽量周五28000周六24700周日20000--知識(shí)儲(chǔ)備1.引入并配置ECharts

先定一個(gè)小目標(biāo)！熟悉引入并配置ECharts的方法，能夠歸納引入并配置ECharts的步驟知識(shí)儲(chǔ)備1.引入并配置ECharts在使用ECharts繪制圖表之前，需要引入并配置ECharts。在HTML中引入ECharts，示例代碼如下。<scriptsrc="./echarts.js"></script>上述示例代碼通過<script>標(biāo)簽的src屬性引入了echarts.js文件后，會(huì)獲得一個(gè)名稱為echarts的對(duì)象，該對(duì)象提供了init()方法，用于創(chuàng)建ECharts實(shí)例對(duì)象。知識(shí)儲(chǔ)備1.引入并配置EChartsinit()方法的語法格式如下。echarts.init(dom);在上述語法格式中，init()方法的參數(shù)dom用于指定渲染的圖表將被放置在哪個(gè)DOM容器中。init()方法的返回值是ECharts實(shí)例對(duì)象。知識(shí)儲(chǔ)備1.引入并配置ECharts在調(diào)用init()方法之后，可以通過ECharts實(shí)例對(duì)象的setOption()方法設(shè)置圖表的配置項(xiàng)。setOption()方法的語法格式如下。setOption(option[,notMerge]);在上述語法格式中，setOption()方法的第1個(gè)參數(shù)option是一個(gè)包含了要設(shè)置的圖表配置項(xiàng)的對(duì)象，第2個(gè)參數(shù)notMerge是一個(gè)可選參數(shù)，表示是否不與已有的配置項(xiàng)合并，默認(rèn)值為false，表示允許新的配置項(xiàng)和已有配置項(xiàng)合并；如果設(shè)為true，則表示不允許新的配置項(xiàng)和已有配置項(xiàng)合并，已有配置項(xiàng)都會(huì)被刪除，然后根據(jù)新的配置項(xiàng)重新渲染圖表。知識(shí)儲(chǔ)備1.引入并配置ECharts在調(diào)用setOption()方法時(shí)，通過設(shè)置不同的配置項(xiàng)，可以實(shí)現(xiàn)不同類型的圖表的繪制。圖表的配置項(xiàng)由多個(gè)組件的配置項(xiàng)組成，包括坐標(biāo)軸組件、系列組件、圖例組件、網(wǎng)格組件、標(biāo)題組件、提示框組件、工具欄組件等。所有配置項(xiàng)的修改都可以通過setOption()方法完成。當(dāng)多次調(diào)用setOption()方法時(shí)，ECharts實(shí)例對(duì)象會(huì)自動(dòng)合并新的配置項(xiàng)和已有的配置項(xiàng)，然后根據(jù)合并后的配置項(xiàng)重新渲染圖表。因此，當(dāng)修改圖表的配置項(xiàng)時(shí)，不需要手動(dòng)處理圖表的刷新和更新，只需要確保傳遞給setOption()方法的新配置項(xiàng)是正確的即可。創(chuàng)建D:\ECharts\chapter02目錄，并使用VSCode編輯器打開該目錄。放入echarts.js文件。創(chuàng)建line_demo01.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)用于被ECharts實(shí)例對(duì)象控制的div元素。步驟1步驟2步驟3演示如何在項(xiàng)目中引入并配置ECharts通過init()方法創(chuàng)建ECharts實(shí)例對(duì)象。準(zhǔn)備配置項(xiàng)。將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。步驟4步驟5步驟6步驟7知識(shí)儲(chǔ)備1.引入并配置ECharts知識(shí)儲(chǔ)備2.坐標(biāo)軸組件

先定一個(gè)小目標(biāo)！掌握坐標(biāo)軸組件的使用方法，能夠設(shè)置圖表的x軸、y軸知識(shí)儲(chǔ)備2.坐標(biāo)軸組件坐標(biāo)軸組件主要有兩個(gè)組成部分：xAxis、yAxis，其中，xAxis表示直角坐標(biāo)系的x軸，yAxis表示直角坐標(biāo)系的y軸。默認(rèn)情況下，x軸位于圖表的底部，y軸位于圖表的左側(cè)。使用xAxis和yAxis可以創(chuàng)建一個(gè)完整的直角坐標(biāo)系，并且可以設(shè)置各種樣式以滿足不同的需求。知識(shí)儲(chǔ)備2.坐標(biāo)軸組件坐標(biāo)軸組件的效果如下圖所示。知識(shí)儲(chǔ)備2.坐標(biāo)軸組件通過option對(duì)象的xAxis屬性和yAxis屬性可以對(duì)直角坐標(biāo)系的x軸和y軸進(jìn)行配置。當(dāng)直角坐標(biāo)系只有1條x軸和1條y軸時(shí)，xAxis、yAxis屬性的值為xAxis、yAxis對(duì)象。xAxis、yAxis對(duì)象的設(shè)置方式如下。varoption={xAxis:{},yAxis:{}};知識(shí)儲(chǔ)備2.坐標(biāo)軸組件當(dāng)直角坐標(biāo)系有多條x軸或y軸時(shí)，xAxis、yAxis屬性的值為xAxis、yAxis數(shù)組，數(shù)組中的每個(gè)元素均為對(duì)象。xAxis、yAxis數(shù)組的設(shè)置方式如下。varoption={xAxis:[],yAxis:[]};知識(shí)儲(chǔ)備xAxis、yAxis對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示坐標(biāo)軸，默認(rèn)值為true，表示顯示x軸或y軸，設(shè)為false表示不顯示x軸或y軸position用于設(shè)置坐標(biāo)軸的位置，當(dāng)設(shè)置x軸的位置時(shí)，可選值有bottom（默認(rèn)值）、top，分別表示x軸在圖表下方、x軸在圖表上方；當(dāng)設(shè)置y軸的位置時(shí)，可選值有l(wèi)eft（默認(rèn)值）、right，分別表示y軸在圖表左側(cè)、y軸在圖表右側(cè)type用于設(shè)置坐標(biāo)軸的類型，常見的可選值為category（默認(rèn)值）、value，分別表示類目軸、數(shù)值軸。類目軸用于展示類目名稱，數(shù)值軸用于展示具體的數(shù)值data用于設(shè)置坐標(biāo)軸數(shù)據(jù)2.坐標(biāo)軸組件知識(shí)儲(chǔ)備>>接上表屬性說明name用于設(shè)置坐標(biāo)軸名稱nameGap用于設(shè)置坐標(biāo)軸名稱與軸線的距離，默認(rèn)值為15boundaryGap用于設(shè)置坐標(biāo)軸兩邊留白的策略nameLocation用于設(shè)置坐標(biāo)軸名稱的顯示位置，可選值有start、middle或center、end（默認(rèn)值），分別表示坐標(biāo)軸名稱顯示在坐標(biāo)軸的開始位置、中間位置、結(jié)束位置nameTextStyle用于設(shè)置坐標(biāo)軸名稱的文本樣式2.坐標(biāo)軸組件知識(shí)儲(chǔ)備（1）data屬性data屬性用于設(shè)置坐標(biāo)軸數(shù)據(jù)，在不同類型的坐標(biāo)軸中，data屬性的設(shè)置方式不同。在類目軸中，data屬性用于設(shè)置類目名稱列表；在數(shù)值軸中，則不設(shè)置data屬性。下面主要針對(duì)類目軸中的data屬性進(jìn)行講解。data屬性的值為data數(shù)組，數(shù)組中的每個(gè)元素表示一個(gè)數(shù)據(jù)項(xiàng)，數(shù)據(jù)項(xiàng)可以是data對(duì)象或者字符串。2.坐標(biāo)軸組件知識(shí)儲(chǔ)備①當(dāng)data數(shù)組中的數(shù)據(jù)項(xiàng)為data對(duì)象時(shí)，data對(duì)象的屬性如下表所示。屬性說明value用于設(shè)置類目名稱textStyle用于設(shè)置類目名稱的文字樣式2.坐標(biāo)軸組件textStyle屬性的值為textStyle對(duì)象，該對(duì)象的常用屬性如下。color：用于設(shè)置文字的顏色。fontSize：用于設(shè)置文字的字體大小。backgroundColor：用于設(shè)置文字塊背景色。知識(shí)儲(chǔ)備2.坐標(biāo)軸組件data數(shù)組中的數(shù)據(jù)項(xiàng)為對(duì)象的示例代碼如下。data:[

{

value:'周一',

textStyle:{

fontSize:20

}

}]知識(shí)儲(chǔ)備2.坐標(biāo)軸組件②當(dāng)data數(shù)組中的數(shù)據(jù)項(xiàng)為字符串時(shí)，每個(gè)字符串表示一個(gè)類目名稱，示例代碼如下。data:['周一','周二','周三','周四','周五']存儲(chǔ)了周一到周五的數(shù)據(jù)知識(shí)儲(chǔ)備（2）boundaryGap屬性類目軸和數(shù)值軸的boundaryGap屬性值的類型不同，下面分別進(jìn)行講解。在類目軸中，boundaryGap屬性的值為布爾類型，默認(rèn)值為true，這時(shí)刻度只作為分隔線，類目名稱會(huì)顯示在兩個(gè)刻度之間。當(dāng)boundaryGap屬性的值為false時(shí)，類目名稱顯示在對(duì)應(yīng)刻度的下方。在數(shù)值軸中，boundaryGap屬性值為數(shù)組，數(shù)組中包含兩個(gè)元素，這兩個(gè)元素分別表示數(shù)據(jù)的最大值和最小值，可以直接將其設(shè)置為數(shù)值或者百分比字符串。2.坐標(biāo)軸組件知識(shí)儲(chǔ)備2.坐標(biāo)軸組件在數(shù)值軸中設(shè)置boundaryGap屬性，示例代碼如下。boundaryGap:['20%','20%']數(shù)據(jù)最小值為20%，最大值為20%知識(shí)儲(chǔ)備2.坐標(biāo)軸組件nameTextStyle屬性用于設(shè)置坐標(biāo)軸名稱的文本樣式，該屬性的值為nameTextStyle對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={xAxis:{nameTextStyle:{}}};（3）nameTextStyle屬性知識(shí)儲(chǔ)備2.坐標(biāo)軸組件nameTextStyle對(duì)象的常用屬性如下表所示。屬性說明color用于設(shè)置坐標(biāo)軸名稱的顏色fontStyle用于設(shè)置坐標(biāo)軸名稱的字體風(fēng)格，可選值有normal（默認(rèn)值）、italic、oblique，分別表示正常字體、斜體、傾斜fontSize用于設(shè)置坐標(biāo)軸名稱的字體大小，默認(rèn)值為12padding用于設(shè)置文字塊的內(nèi)邊距，默認(rèn)值為0lineHeight用于設(shè)置行高，默認(rèn)值為12知識(shí)儲(chǔ)備2.坐標(biāo)軸組件設(shè)置x軸名稱文本樣式的示例代碼如下。xAxis:[{nameTextStyle:{color:'rgba(180,180,180,0.2)',fontStyle:'italic',fontSize:20,lineHeight:15,padding:[0,90,0,0]

}}]知識(shí)儲(chǔ)備3.系列組件

先定一個(gè)小目標(biāo)！掌握系列組件的使用方法，能夠設(shè)置圖表的系列知識(shí)儲(chǔ)備3.系列組件在ECharts中，系列組件用于存儲(chǔ)圖表系列的數(shù)據(jù)并將數(shù)據(jù)展示到圖表中。基礎(chǔ)折線圖中系列組件的效果如下圖所示。知識(shí)儲(chǔ)備3.系列組件在ECharts中，通過option對(duì)象的series屬性可以配置系列組件。series屬性中可以包含多個(gè)系列，它們能夠組成一種圖表類型，如折線圖、柱狀圖、散點(diǎn)圖等。每個(gè)系列可以設(shè)置不同的數(shù)據(jù)、樣式等屬性，用于呈現(xiàn)視覺效果不同的圖表。例如，一張折線圖可能需要展示多條折線，每條折線都是一個(gè)系列，可以設(shè)置不同的屬性。知識(shí)儲(chǔ)備3.系列組件series屬性的值為數(shù)組，數(shù)組中每個(gè)元素都為對(duì)象，series數(shù)組的設(shè)置方式如下。varoption={series:[{}]};series數(shù)組中的每個(gè)元素均為一個(gè)系列，這些系列是對(duì)象類型的數(shù)據(jù)。如果想要實(shí)現(xiàn)多個(gè)系列的折線圖效果，只需要在series數(shù)組中添加對(duì)應(yīng)的元素個(gè)數(shù)。知識(shí)儲(chǔ)備3.系列組件系列的常用屬性如下表所示。屬性說明type用于設(shè)置系列類型，常用的可選值有l(wèi)ine、bar、pie，分別表示折線圖、柱狀圖、餅圖name用于設(shè)置系列名稱，以及提示框組件的顯示、圖例的篩選data用于設(shè)置系列中的數(shù)據(jù)內(nèi)容知識(shí)儲(chǔ)備3.系列組件通常情況下，用一個(gè)二維數(shù)組表示data屬性的值，二維數(shù)組中每一行數(shù)據(jù)表示一個(gè)數(shù)據(jù)項(xiàng)，每一列數(shù)據(jù)被稱為一個(gè)維度。在圖表中，第1列通常被稱為維度X，默認(rèn)對(duì)應(yīng)xAxis，表示x軸上的數(shù)據(jù)；第2列通常被稱為維度Y，默認(rèn)對(duì)應(yīng)yAxis，表示y軸上的數(shù)據(jù)。data屬性的值可以是二維數(shù)組或一維數(shù)組，下面分別進(jìn)行講解。（1）data屬性的值是二維數(shù)組知識(shí)儲(chǔ)備3.系列組件data屬性的示例代碼如下。series:[{data:[//[維度X,維度Y]['周一',5],['周二',4],['周三',2],['周四',3],['周五',4],['周六',5],['周日',6]]}]知識(shí)儲(chǔ)備3.系列組件（2）data屬性的值是一維數(shù)組當(dāng)只有一條軸為類目軸時(shí)，data屬性的值可以被簡(jiǎn)化為包含數(shù)字的一維數(shù)組，示例代碼如下。xAxis:{data:['a','b','c','d']},series:[{data:[23,44,55,19]}]知識(shí)儲(chǔ)備3.系列組件當(dāng)需要為個(gè)別數(shù)據(jù)項(xiàng)設(shè)置名稱時(shí)，data屬性的值是包含對(duì)象的一維數(shù)組。data屬性中的數(shù)組元素為對(duì)象時(shí)，data對(duì)象的常用屬性如下。name：用于設(shè)置數(shù)據(jù)項(xiàng)的名稱。value：用于設(shè)置數(shù)據(jù)項(xiàng)的值。知識(shí)儲(chǔ)備3.系列組件data屬性的值是包含對(duì)象的一維數(shù)組時(shí)的示例代碼如下。series:[{data:[12,

{name:'蘋果',value:22}]}]知識(shí)儲(chǔ)備3.系列組件在使用系列組件時(shí)，還有一些注意事項(xiàng)：對(duì)于類目軸，如果沒有設(shè)置data屬性，則ECharts會(huì)自動(dòng)從系列的data屬性中獲取data內(nèi)容作為類目軸的刻度標(biāo)簽。如果系列中沒有定義data屬性或者data屬性的值為空，那么就會(huì)出現(xiàn)類目軸無法正常顯示刻度標(biāo)簽的情況。對(duì)于數(shù)值軸，刻度標(biāo)簽是根據(jù)系列中數(shù)據(jù)的范圍來確定的。通常情況下，數(shù)值軸的刻度標(biāo)簽會(huì)被設(shè)置為系列中數(shù)據(jù)的最小值和最大值的等間隔值。例如，在一條數(shù)值軸上，如果系列中的數(shù)據(jù)范圍為0到100，且希望在坐標(biāo)軸上顯示10個(gè)刻度標(biāo)簽，那么每個(gè)刻度標(biāo)簽的間隔值是10。知識(shí)儲(chǔ)備4.標(biāo)題組件

先定一個(gè)小目標(biāo)！掌握標(biāo)題組件的使用方法，能夠設(shè)置圖表的標(biāo)題知識(shí)儲(chǔ)備在圖表中，可以通過主標(biāo)題來對(duì)圖表的主題進(jìn)行概括，通過副標(biāo)題來對(duì)主標(biāo)題進(jìn)行補(bǔ)充說明或者說明數(shù)據(jù)來源。在ECharts中，通過標(biāo)題組件可以設(shè)置圖表中的主標(biāo)題和副標(biāo)題。4.標(biāo)題組件知識(shí)儲(chǔ)備基礎(chǔ)折線圖中標(biāo)題組件的效果如下圖所示。4.標(biāo)題組件知識(shí)儲(chǔ)備通過option對(duì)象的title屬性可以配置標(biāo)題組件，title屬性的值為title對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={title:{}};4.標(biāo)題組件知識(shí)儲(chǔ)備title對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示標(biāo)題組件，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示text用于設(shè)置主標(biāo)題，支持使用\n換行，默認(rèn)值為空textStyle用于設(shè)置主標(biāo)題的樣式subtext用于設(shè)置副標(biāo)題，支持使用\n換行，默認(rèn)值為空subtextStyle用于設(shè)置副標(biāo)題的樣式

itemGap用于設(shè)置主副標(biāo)題的距離，默認(rèn)值為10left用于設(shè)置標(biāo)題組件距離容器左側(cè)的距離，默認(rèn)值為auto4.標(biāo)題組件知識(shí)儲(chǔ)備>>接上表4.標(biāo)題組件屬性說明right用于設(shè)置標(biāo)題組件距離容器右側(cè)的距離，默認(rèn)值為autotop用于設(shè)置標(biāo)題組件距離容器上側(cè)的距離，默認(rèn)值為autobottom用于設(shè)置標(biāo)題組件距離容器下側(cè)的距離，默認(rèn)值為autobackgroundColor用于設(shè)置標(biāo)題組件的背景色，默認(rèn)值為transparent（透明），該屬性生效的前提是show屬性的值為trueborderColor用于設(shè)置標(biāo)題組件的邊框顏色，默認(rèn)值為#ccc，該屬性生效的前提是show屬性的值為trueborderWidth用于設(shè)置標(biāo)題的邊框線寬，默認(rèn)值為0，該屬性生效的前提是show屬性的值為true知識(shí)儲(chǔ)備（1）textStyle屬性textStyle屬性用于設(shè)置主標(biāo)題的樣式，該屬性的值為textStyle對(duì)象，該對(duì)象的設(shè)置方式如下。4.標(biāo)題組件varoption={title:{textStyle:{}}};知識(shí)儲(chǔ)備textStyle對(duì)象的常用屬性如下表所示。4.標(biāo)題組件屬性說明color用于設(shè)置主標(biāo)題的顏色，默認(rèn)值為#333fontSize用于設(shè)置主標(biāo)題的字體大小，默認(rèn)值為18width用于設(shè)置主標(biāo)題的顯示寬度，默認(rèn)值為100height用于設(shè)置主標(biāo)題的顯示高度，默認(rèn)值為50overflow用于設(shè)置文字超出寬度是否截?cái)嗷蛘邠Q行，該屬性在配置了width后有效，可選值為none（默認(rèn)值）、truncate、break，分別表示文字超出寬度后不截?cái)嗷虿粨Q行、文字超出寬度時(shí)截?cái)嗖⒃谀┪诧@示ellipsis屬性配置的文字、文字超出寬度時(shí)換行ellipsis用于設(shè)置當(dāng)overflow屬性值為truncate時(shí)，可以通過該屬性配置末尾顯示的內(nèi)容，默認(rèn)值為…知識(shí)儲(chǔ)備（2）subtextStyle屬性subtextStyle屬性用于設(shè)置副標(biāo)題的樣式，該屬性的值為subtextStyle對(duì)象，該對(duì)象的設(shè)置方式如下。4.標(biāo)題組件varoption={title:{subtextStyle:{}}};知識(shí)儲(chǔ)備subtextStyle對(duì)象與textStyle對(duì)象的常用屬性基本相同，subtextStyle對(duì)象特有的屬性如下表所示。4.標(biāo)題組件屬性說明align用于設(shè)置副標(biāo)題的水平對(duì)齊方式，可選值有l(wèi)eft、center、rightverticalAlign用于設(shè)置副標(biāo)題的垂直對(duì)齊方式，可選值有top、middle、bottom知識(shí)儲(chǔ)備設(shè)置圖表中標(biāo)題的示例代碼如下。varoption={title:{text:'主標(biāo)題',subtext:'副標(biāo)題',left:'center',top:'middle',textStyle:{fontSize:30},subtextStyle:{fontSize:20},show:true}};4.標(biāo)題組件任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握基礎(chǔ)折線圖的使用，能夠根據(jù)需求繪制基礎(chǔ)折線圖任務(wù)實(shí)現(xiàn)創(chuàng)建line.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置基礎(chǔ)折線圖的配置項(xiàng)和數(shù)據(jù)。步驟3步驟4基于最近一周內(nèi)的用戶瀏覽量繪制基礎(chǔ)折線圖任務(wù)實(shí)現(xiàn)瀏覽器中打開line.html文件，最近一周內(nèi)用戶瀏覽量的基礎(chǔ)折線圖效果如下圖所示。繪制堆疊折線圖【任務(wù)2.1.2】任務(wù)需求某校始終積極貫徹落實(shí)各項(xiàng)規(guī)章制度，定期開展每月考核，切實(shí)提高學(xué)校課堂教學(xué)質(zhì)量，構(gòu)建良好教育生態(tài)。為了更好地開展工作，各年級(jí)班主任需要定期統(tǒng)計(jì)學(xué)生各科學(xué)習(xí)成績(jī)，并取均值。班主任余老師希望繪制一張堆疊折線圖來更好地展示本班部分學(xué)科學(xué)習(xí)成績(jī)的變化趨勢(shì)，從而幫助學(xué)生、家長和老師及時(shí)發(fā)現(xiàn)問題并進(jìn)行查漏補(bǔ)缺，進(jìn)而提高學(xué)生的學(xué)習(xí)成績(jī)。本任務(wù)需要基于初三某班部分學(xué)科學(xué)習(xí)成績(jī)繪制堆疊折線圖。初三某班部分學(xué)科學(xué)習(xí)成績(jī)（單位：分）如下表所示?？荚嚂r(shí)間語文數(shù)學(xué)道德與法治物理第1次月考90808570第2次月考80828880第3次月考85858585第4次月考87909090任務(wù)需求知識(shí)儲(chǔ)備1.初識(shí)堆疊折線圖

先定一個(gè)小目標(biāo)！了解堆疊折線圖的概念，能夠說出什么是堆疊折線圖知識(shí)儲(chǔ)備1.初識(shí)堆疊折線圖基礎(chǔ)折線圖只能反映一個(gè)數(shù)據(jù)的變化趨勢(shì)，如果想要反映多個(gè)數(shù)據(jù)的變化趨勢(shì)，則需要使用堆疊折線圖。在堆疊折線圖中，不同樣本的數(shù)據(jù)會(huì)被放在同一組并堆疊到一起，通過縱向累加展示總量和各部分的比例，幫助用戶直觀了解數(shù)據(jù)的整體變化趨勢(shì)。要查看堆疊折線圖中數(shù)據(jù)的占比，可以通過觀察某一類目名稱下對(duì)應(yīng)系列的高度與總體高度來獲得。知識(shí)儲(chǔ)備1.初識(shí)堆疊折線圖當(dāng)有兩個(gè)系列時(shí)，使用基礎(chǔ)折線圖和堆疊折線圖進(jìn)行對(duì)比，如下圖所示。知識(shí)儲(chǔ)備2.圖例組件

先定一個(gè)小目標(biāo)！掌握?qǐng)D例組件的使用方法，能夠設(shè)置圖表的圖例知識(shí)儲(chǔ)備在ECharts中，通過圖例組件可以設(shè)置圖表的圖例，幫助我們更好地理解圖表的內(nèi)容。圖例組件展示了不同系列的標(biāo)記、顏色和名稱。單擊圖例可以控制特定系列的顯示和隱藏。堆疊折線圖中圖例組件的效果如下圖所示。2.圖例組件知識(shí)儲(chǔ)備通過option對(duì)象的legend屬性可以配置圖例組件，legend屬性的值為legend對(duì)象，該對(duì)象的設(shè)置方式如下。2.圖例組件varoption={legend:{}};知識(shí)儲(chǔ)備legend對(duì)象的常用屬性如下表所示。屬性說明type用于設(shè)置圖例的類型，可選值有plain（默認(rèn)值）、scroll，分別表示普通圖例、可滾動(dòng)翻頁的圖例show用于設(shè)置是否顯示圖例，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示left用于設(shè)置圖例組件離容器左側(cè)的距離，默認(rèn)值為autoright用于設(shè)置圖例組件離容器右側(cè)的距離，默認(rèn)值為autotop用于設(shè)置圖例組件離容器上側(cè)的距離，默認(rèn)值為auto2.圖例組件知識(shí)儲(chǔ)備>>接上表屬性說明bottom用于設(shè)置圖例組件離容器下側(cè)的距離，默認(rèn)值為autowidth用于設(shè)置圖例組件的寬度，默認(rèn)值為autoheight用于設(shè)置圖例組件的高度，默認(rèn)值為autoorient用于設(shè)置圖例列表的布局朝向，可選值有horizontal（默認(rèn)值）、vertical，分別表示水平朝向、垂直朝向data用于設(shè)置圖例的數(shù)據(jù)2.圖例組件知識(shí)儲(chǔ)備設(shè)置圖例組件距離容器左側(cè)的距離的示例代碼如下。legend:{left:'20%'}2.圖例組件圖例組件距離容器左側(cè)的距離被設(shè)置為20%。設(shè)置后，圖例組件會(huì)相對(duì)于容器的左側(cè)邊緣向右移動(dòng)20%的距離。知識(shí)儲(chǔ)備data屬性的值為數(shù)組，數(shù)組元素通常為字符串，每一個(gè)字符串代表一個(gè)系列的name屬性。如果legend對(duì)象的data屬性沒有被指定，會(huì)自動(dòng)從系列的name屬性中獲取。設(shè)置圖表中圖例組件的示例代碼如下。legend:{data:['梅花','蘭花','竹','菊花']}2.圖例組件通過legend對(duì)象的data屬性設(shè)置了圖例的數(shù)據(jù)知識(shí)儲(chǔ)備3.數(shù)據(jù)堆疊

先定一個(gè)小目標(biāo)！掌握數(shù)據(jù)堆疊的使用方法，能夠設(shè)置數(shù)據(jù)堆疊知識(shí)儲(chǔ)備在ECharts中，通過系列的stack屬性可以實(shí)現(xiàn)數(shù)據(jù)堆疊。stack屬性的值為字符串類型的數(shù)據(jù)，stack屬性的設(shè)置方式如下。series:[{stack:''}]stack屬性的值可以是任意字符串，例如，subject、room、book等。在同一個(gè)類目軸上，如果stack屬性值相同，則系列可以堆疊放置3.數(shù)據(jù)堆疊知識(shí)儲(chǔ)備4.折線圖的文本標(biāo)簽

先定一個(gè)小目標(biāo)！掌握折線圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等知識(shí)儲(chǔ)備為了讓用戶更直觀地了解折線圖中每個(gè)數(shù)據(jù)項(xiàng)的數(shù)值，可以通過系列的label屬性設(shè)置折線圖的文本標(biāo)簽。當(dāng)系列的type屬性值為line，并且設(shè)置了label屬性時(shí)，可設(shè)置折線圖的文本標(biāo)簽。label屬性的值為label對(duì)象，折線圖中l(wèi)abel對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示文本標(biāo)簽，默認(rèn)值為false，表示不顯示，設(shè)為true表示顯示position用于設(shè)置文本標(biāo)簽的位置，默認(rèn)值為top，表示文本標(biāo)簽在數(shù)據(jù)項(xiàng)上方顯示4.折線圖的文本標(biāo)簽知識(shí)儲(chǔ)備4.折線圖的文本標(biāo)簽設(shè)置折線圖文本標(biāo)簽的示例代碼如下。series:[{type:'line',label:{show:true,position:'left'}}]任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握堆疊折線圖的使用，能夠根據(jù)需求繪制堆疊折線圖任務(wù)實(shí)現(xiàn)創(chuàng)建stackedLine.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置堆疊折線圖配置項(xiàng)和數(shù)據(jù)。步驟3步驟4基于初三某班部分學(xué)科學(xué)習(xí)成績(jī)繪制堆疊折線圖任務(wù)實(shí)現(xiàn)瀏覽器中打開stackedLine.html文件，初三某班部分學(xué)科學(xué)習(xí)成績(jī)的堆疊折線圖效果如下圖所示。繪制區(qū)域面積圖【任務(wù)2.1.3】任務(wù)需求自媒體的興起為人們提供了多元化的信息來源，豐富了我們的生活和工作。通過自媒體，我們可以記錄美好生活，分享風(fēng)土人情。小王是一名美食博主，他主要通過拍攝充滿生活氣息的內(nèi)容并通過幽默詼諧的講述方式來吸引觀眾，讓他們了解不同地區(qū)的美食。經(jīng)過多年的努力，他的賬號(hào)已經(jīng)擁有了5萬多個(gè)粉絲。本任務(wù)需要基于小王運(yùn)營賬號(hào)近幾年的粉絲數(shù)量繪制區(qū)域面積圖。小王運(yùn)營的賬號(hào)近幾年的粉絲數(shù)量（單位：人）如下表所示。2018年2019年2020年2021年2022年1200030000303004002055000任務(wù)需求知識(shí)儲(chǔ)備1.初識(shí)區(qū)域面積圖

先定一個(gè)小目標(biāo)！了解區(qū)域面積圖的概念，能夠說出什么是區(qū)域面積圖知識(shí)儲(chǔ)備1.初識(shí)區(qū)域面積圖區(qū)域面積圖通常用于展示數(shù)據(jù)與時(shí)間或其他連續(xù)性變量的變化趨勢(shì)。在區(qū)域面積圖中，折線與x軸或y軸所構(gòu)成的陰影部分即區(qū)域面積圖。相對(duì)于基礎(chǔ)折線圖，區(qū)域面積圖在強(qiáng)調(diào)數(shù)據(jù)整體趨勢(shì)和變化方面效果更加明顯。知識(shí)儲(chǔ)備區(qū)域面積圖的效果如下圖所示。1.初識(shí)區(qū)域面積圖知識(shí)儲(chǔ)備2.區(qū)域填充樣式

先定一個(gè)小目標(biāo)！掌握區(qū)域填充樣式的設(shè)置方法，能夠設(shè)置區(qū)域填充樣式知識(shí)儲(chǔ)備在折線圖中，若要傳達(dá)總體數(shù)據(jù)，而不是確切的單個(gè)數(shù)據(jù)，可以為折線圖設(shè)置區(qū)域填充樣式。當(dāng)系列的type屬性值為line并且設(shè)置了areaStyle屬性時(shí)，圖表類型為區(qū)域面積圖。areaStyle屬性的值為areaStyle對(duì)象，該對(duì)象的設(shè)置方式如下。series:[{areaStyle:{}}]2.區(qū)域填充樣式知識(shí)儲(chǔ)備areaStyle對(duì)象的常用屬性如下表所示。屬性說明color用于設(shè)置填充的顏色，默認(rèn)值為#000opacity用于設(shè)置圖形的不透明度，默認(rèn)值為0.7origin用于設(shè)置圖形區(qū)域的起始位置，可選值為auto（默認(rèn)值）、start、end，分別表示填充坐標(biāo)軸軸線到數(shù)據(jù)間的區(qū)域、填充坐標(biāo)軸底部到數(shù)據(jù)間的區(qū)域、填充坐標(biāo)軸頂部到數(shù)據(jù)間的區(qū)域2.區(qū)域填充樣式知識(shí)儲(chǔ)備設(shè)置折線圖區(qū)域填充樣式的示例代碼如下。series:[{type:'line',areaStyle:{color:'#555',opacity:0.5}}]2.區(qū)域填充樣式知識(shí)儲(chǔ)備3.網(wǎng)格組件

先定一個(gè)小目標(biāo)！掌握網(wǎng)格組件的使用方法，能夠設(shè)置圖表的網(wǎng)格知識(shí)儲(chǔ)備在ECharts中，網(wǎng)格組件用于在直角坐標(biāo)系內(nèi)顯示網(wǎng)格。區(qū)域面積圖中網(wǎng)格組件的效果如下圖所示。3.網(wǎng)格組件知識(shí)儲(chǔ)備通過option對(duì)象的grid屬性可以配置網(wǎng)格組件，grid屬性的值為grid對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={grid:{}};3.網(wǎng)格組件知識(shí)儲(chǔ)備grid對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示直角坐標(biāo)系網(wǎng)格，默認(rèn)值為false，表示不顯示，設(shè)為true表示顯示left用于設(shè)置網(wǎng)格組件距離容器左側(cè)的距離，默認(rèn)值為10%right用于設(shè)置網(wǎng)格組件距離容器右側(cè)的距離，默認(rèn)值為10%top用于設(shè)置網(wǎng)格組件距離容器上側(cè)的距離，默認(rèn)值為60bottom用于設(shè)置網(wǎng)格組件距離容器下側(cè)的距離，默認(rèn)值為603.網(wǎng)格組件知識(shí)儲(chǔ)備>>接上表屬性說明width用于設(shè)置網(wǎng)格組件的寬度，默認(rèn)值為autoheight用于設(shè)置網(wǎng)格組件的高度，默認(rèn)值為autobackgroundColor用于設(shè)置網(wǎng)格組件的背景色，默認(rèn)值為transparent，該屬性生效的前提是show屬性的值為trueborderColor用于設(shè)置網(wǎng)格組件的邊框顏色，默認(rèn)值為#ccc，該屬性生效的前提是show屬性的值為trueborderWidth用于設(shè)置網(wǎng)格的邊框線寬，默認(rèn)值為1，該屬性生效的前提是show屬性的值為true3.網(wǎng)格組件知識(shí)儲(chǔ)備設(shè)置圖表中網(wǎng)格的示例代碼如下。varoption={

grid:{show:true,left:30,right:30,top:'10%',bottom:'10%',backgroundColor:'red',borderColor:'black',borderWidth:2}};3.網(wǎng)格組件任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握區(qū)域面積圖的使用，能夠根據(jù)需求繪制區(qū)域面積圖任務(wù)實(shí)現(xiàn)創(chuàng)建area.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，并將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置區(qū)域面積圖的配置項(xiàng)和數(shù)據(jù)。步驟3步驟4基于小王運(yùn)營的賬號(hào)近幾年的粉絲數(shù)量繪制區(qū)域面積圖任務(wù)實(shí)現(xiàn)瀏覽器中打開area.html文件，小王運(yùn)營的賬號(hào)近幾年的粉絲數(shù)量的區(qū)域面積圖效果如下圖所示。繪制堆疊面積折線圖【任務(wù)2.1.4】任務(wù)需求“小餅如嚼月，中有酥與飴”表達(dá)了蘇軾對(duì)于月餅的喜愛。如今，月餅與各地的飲食習(xí)俗相融合，發(fā)展出了廣式、京式、蘇式等各種口味的月餅。姚經(jīng)理希望繪制一張堆疊面積折線圖來更好地展示各個(gè)季度不同口味月餅的銷售趨勢(shì)，從而制定更好的銷售措施，提升月餅的銷量。本任務(wù)需要基于各個(gè)季度不同口味月餅的銷售繪制堆疊面積折線圖。姚經(jīng)理整理了各季度不同口味月餅的銷售數(shù)量，如下表所示。時(shí)間廣式月餅京式月餅蘇式月餅第1季度789第2季度9108第3季度111312第4季度81211任務(wù)需求知識(shí)儲(chǔ)備1.初識(shí)堆疊面積折線圖

先定一個(gè)小目標(biāo)！了解堆疊面積折線圖的概念，能夠說出什么是堆疊面積折線圖知識(shí)儲(chǔ)備堆疊面積折線圖類似于區(qū)域面積圖，不同之處在于它將不同系列的數(shù)據(jù)堆疊起來展示，每個(gè)系列的面積會(huì)按照其數(shù)值大小依次疊加。在堆疊面積折線圖中，每個(gè)數(shù)據(jù)所占的面積都會(huì)被堆疊放置在前一個(gè)數(shù)據(jù)的上方，從而形成一個(gè)逐層疊加的面積圖形式。1.初識(shí)堆疊面積折線圖知識(shí)儲(chǔ)備堆疊面積折線圖的效果，如下圖所示。1.初識(shí)堆疊面積折線圖知識(shí)儲(chǔ)備2.提示框組件

先定一個(gè)小目標(biāo)！掌握提示框組件的使用方法，能夠設(shè)置圖表的提示框知識(shí)儲(chǔ)備在ECharts中，提示框組件可以在圖表中顯示一個(gè)提示框，從而幫助用戶更好地了解數(shù)據(jù)。堆疊面積折線圖中提示框組件的效果，如下圖所示。2.提示框組件知識(shí)儲(chǔ)備在ECharts中，通過tooltip屬性可以配置提示框組件。tooltip屬性可以應(yīng)用在以下4種情境中。在全局中應(yīng)用：在option中添加tooltip。在網(wǎng)格組件中應(yīng)用：在grid中添加tooltip。在系列組件中應(yīng)用：在series中添加tooltip。在系列的每個(gè)數(shù)據(jù)項(xiàng)中應(yīng)用：在series的data中添加tooltip。2.提示框組件知識(shí)儲(chǔ)備tooltip屬性的值為tooltip對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={tooltip:{}};2.提示框組件知識(shí)儲(chǔ)備tooltip對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示提示框組件，可選值為true（默認(rèn)值）、false，分別表示顯示提示框組件、不顯示提示框組件trigger用于設(shè)置觸發(fā)類型axisPointer用于設(shè)置坐標(biāo)軸指示器，即鼠標(biāo)指針移入對(duì)應(yīng)數(shù)據(jù)項(xiàng)坐標(biāo)軸顯示的指示器樣式或行為2.提示框組件知識(shí)儲(chǔ)備（1）trigger屬性trigger屬性的常用可選值如下。item：默認(rèn)值，表示鼠標(biāo)指針移入數(shù)據(jù)項(xiàng)元素觸發(fā)提示框，提示框會(huì)顯示當(dāng)前位置的數(shù)據(jù)信息。axis：鼠標(biāo)指針移入坐標(biāo)軸觸發(fā)。none：不觸發(fā)。2.提示框組件知識(shí)儲(chǔ)備（2）axisPointer屬性axisPointer屬性的值為axisPointer對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={tooltip:{axisPointer:{type:'',label:{}}}};2.提示框組件知識(shí)儲(chǔ)備2.提示框組件axisPointer對(duì)象的常用屬性如下表所示。屬性說明type用于設(shè)置指示器類型，可選值有l(wèi)ine（默認(rèn)值）、shadow、none、cross，分別表示直線指示器、陰影指示器、無指示器、十字準(zhǔn)星指示器label用于設(shè)置坐標(biāo)軸指示器的文本標(biāo)簽知識(shí)儲(chǔ)備2.提示框組件label屬性的值為label對(duì)象，該對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置坐標(biāo)軸指示器中文本標(biāo)簽的顯示狀態(tài)，可選值為false（默認(rèn)值）、true，分別表示不顯示文本標(biāo)簽、顯示文本標(biāo)簽。但是如果axisPointer對(duì)象的type屬性的值被設(shè)置為cross，則默認(rèn)值為true，表示顯示文本標(biāo)簽color用于設(shè)置文本顏色，默認(rèn)值為#fffbackgroundColor用于設(shè)置文本標(biāo)簽的背景色fontSize用于設(shè)置文字的字體大小，默認(rèn)值為12知識(shí)儲(chǔ)備設(shè)置提示框的示例代碼如下。varoption={tooltip:{trigger:'axis',axisPointer:{type:'cross',label:{color:'#6a7986'}}}};2.提示框組件任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握堆疊面積折線圖的使用，能夠根據(jù)需求繪制堆疊面積折線圖任務(wù)實(shí)現(xiàn)創(chuàng)建stackedArea.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，并將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置堆疊面積折線圖的配置項(xiàng)和數(shù)據(jù)。步驟3步驟4基于各個(gè)季度不同口味月餅的銷售數(shù)量繪制堆疊面積折線圖任務(wù)實(shí)現(xiàn)在瀏覽器中打開stackedArea.html文件，各個(gè)季度不同口味月餅的銷售數(shù)量的堆疊面積折線圖效果如下圖所示。任務(wù)實(shí)現(xiàn)鼠標(biāo)指針移入第3季度數(shù)據(jù)項(xiàng)所在坐標(biāo)軸的頁面效果如下圖所示。繪制階梯折線圖【任務(wù)2.1.5】任務(wù)需求自全面建成小康社會(huì)以來，我國人民生活水平普遍提高，大眾對(duì)于美好生活的追求已由物質(zhì)需求轉(zhuǎn)變?yōu)榫裥枨?。故每逢?jié)假日，各地知名旅游景點(diǎn)都人山人海，熱鬧非凡。對(duì)此，各地政府會(huì)據(jù)實(shí)際情況做出相關(guān)安排，保障游客的安全，維護(hù)游客的合法權(quán)益。景點(diǎn)負(fù)責(zé)人希望繪制一張階梯折線圖展示某景點(diǎn)一年來門票價(jià)格的變化情況，從而更好地分析門票銷售情況，并制定相應(yīng)的營銷策略。本任務(wù)需要基于門票價(jià)格繪制階梯折線圖。某景點(diǎn)一年來的門票價(jià)格（單位：元/張）如下表所示。任務(wù)需求月份價(jià)格1月202月203月204月30月份價(jià)格5月306月307月308月30月份價(jià)格9月3010月3011月3012月20知識(shí)儲(chǔ)備1.初識(shí)階梯折線圖

先定一個(gè)小目標(biāo)！了解階梯折線圖的概念，能夠說出階梯折線圖的設(shè)置方式知識(shí)儲(chǔ)備階梯折線圖為折線圖的一種類型，用于顯示數(shù)據(jù)的階段性變化。在現(xiàn)實(shí)生活中，會(huì)發(fā)生階段性變化的數(shù)據(jù)有很多，例如：工資會(huì)在一段時(shí)間內(nèi)維持在同一水平上，直到某一階段突然上升或下降。1.初識(shí)階梯折線圖知識(shí)儲(chǔ)備階梯折線圖的效果，如下圖所示。1.初識(shí)階梯折線圖知識(shí)儲(chǔ)備在ECharts中，當(dāng)設(shè)置系列的type屬性值為line時(shí)，若設(shè)置step屬性值為false，則圖表顯示為基礎(chǔ)折線圖。若設(shè)置step屬性值為以下合法值時(shí)，則圖表顯示為階梯折線圖。true：表示圖表顯示為階梯折線圖，效果如下圖所示。1.初識(shí)階梯折線圖知識(shí)儲(chǔ)備start：表示階梯折線圖拐點(diǎn)為當(dāng)前數(shù)據(jù)項(xiàng)（與step屬性值為true時(shí)效果相同），效果如下圖所示。1.初識(shí)階梯折線圖知識(shí)儲(chǔ)備middle：表示階梯折線圖拐點(diǎn)為當(dāng)前數(shù)據(jù)項(xiàng)與下個(gè)數(shù)據(jù)項(xiàng)的中間點(diǎn)，效果如下圖所示。1.初識(shí)階梯折線圖知識(shí)儲(chǔ)備end：表示階梯折線圖拐點(diǎn)為下個(gè)數(shù)據(jù)項(xiàng)，效果如下圖所示。1.初識(shí)階梯折線圖知識(shí)儲(chǔ)備1.初識(shí)階梯折線圖設(shè)置階梯折線圖的示例代碼如下。series:[{type:'line',step:'start'}]知識(shí)儲(chǔ)備2.工具欄組件

先定一個(gè)小目標(biāo)！掌握工具欄組件的使用方法，能夠設(shè)置圖表的工具欄知識(shí)儲(chǔ)備在ECharts中，工具欄組件提供了一些功能，例如保存為圖片、數(shù)據(jù)視圖、還原等。階梯折線圖中工具欄組件的效果，如下圖所示。2.工具欄組件知識(shí)儲(chǔ)備通過option對(duì)象的toolbox屬性可以配置工具欄組件，toolbox屬性的值為toolbox對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={toolbox:{}};2.工具欄組件知識(shí)儲(chǔ)備toolbox對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示工具欄組件，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示orient用于設(shè)置工具欄icon的布局朝向，可選值有horizontal（默認(rèn)值）、vertical，分別表示橫向布局、縱向布局itemSize用于設(shè)置工具欄icon的大小，默認(rèn)值為15itemGap用于設(shè)置工具欄icon每項(xiàng)的間隔。橫向布局時(shí)為水平間隔，縱向布局時(shí)為縱向間隔。默認(rèn)值為8showTitle用于設(shè)置是否在鼠標(biāo)指針滑過的時(shí)候顯示每個(gè)工具icon的標(biāo)題，默認(rèn)值為true2.工具欄組件知識(shí)儲(chǔ)備>>接上表屬性說明feature用于設(shè)置各工具配置項(xiàng)left用于設(shè)置工具欄組件距離容器左側(cè)的距離，默認(rèn)值為autoright用于設(shè)置工具欄組件距離容器右側(cè)的距離，默認(rèn)值為autotop用于設(shè)置工具欄組件距離容器上側(cè)的距離，默認(rèn)值為autobottom用于設(shè)置工具欄組件距離容器下側(cè)的距離，默認(rèn)值為autowidth用于設(shè)置工具欄組件的寬度，默認(rèn)值為autoheight用于設(shè)置工具欄組件的高度，默認(rèn)值為auto2.工具欄組件知識(shí)儲(chǔ)備feature屬性的值為feature對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={toolbox:{feature:{}}};2.工具欄組件知識(shí)儲(chǔ)備feature對(duì)象的常用屬性如下表所示。屬性說明saveAsImage用于將圖表保存為圖片restore用于設(shè)置配置項(xiàng)還原dataView用于設(shè)置數(shù)據(jù)視圖2.工具欄組件知識(shí)儲(chǔ)備（1）saveAsImage屬性saveAsImage屬性的值為saveAsImage對(duì)象，該對(duì)象的常用屬性如下表所示。2.工具欄組件屬性說明type用于設(shè)置保存的圖片格式，默認(rèn)值為pngname用于設(shè)置保存的文件名稱，默認(rèn)使用title對(duì)象的text屬性的值作為名稱backgroundColor用于設(shè)置保存的圖片背景色，默認(rèn)值為白色show用于設(shè)置是否顯示該工具，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示title用于設(shè)置標(biāo)題，默認(rèn)值為“保存為圖片”知識(shí)儲(chǔ)備（2）restore屬性restore屬性的值為restore對(duì)象，該對(duì)象的常用屬性如下表所示。2.工具欄組件屬性說明show用于設(shè)置是否顯示該工具，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示title用于設(shè)置標(biāo)題，默認(rèn)值為“還原”知識(shí)儲(chǔ)備（3）dataView屬性dataView屬性的值為dataView對(duì)象，該對(duì)象的常用屬性如下表所示。2.工具欄組件屬性說明show用于設(shè)置是否顯示該工具，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示title用于設(shè)置標(biāo)題，默認(rèn)值為“數(shù)據(jù)視圖”lang用于設(shè)置數(shù)據(jù)視圖上的3個(gè)話術(shù)，默認(rèn)是['數(shù)據(jù)視圖','關(guān)閉','刷新']任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握階梯折線圖的使用，能夠根據(jù)需求繪制階梯折線圖任務(wù)實(shí)現(xiàn)創(chuàng)建steppedLine.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，并將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。根據(jù)任務(wù)需求給出的表格中的月份定義x軸的數(shù)據(jù)。步驟1步驟2步驟3基于門票價(jià)格繪制階梯折線圖步驟4根據(jù)任務(wù)需求給出的表格中的門票價(jià)格定義y軸的數(shù)據(jù)。設(shè)置階梯折線圖的配置項(xiàng)和數(shù)據(jù)。步驟5步驟6任務(wù)實(shí)現(xiàn)瀏覽器中打開steppedLine.html文件，門票價(jià)格的階梯折線圖效果如下圖所示。單擊紅框處從左至右的按鈕分別可以將當(dāng)前圖表保存為圖片、展示數(shù)據(jù)視圖、還原圖表。繪制平滑曲線圖【任務(wù)2.1.6】任務(wù)需求妙妙是快遞站的老板，她希望繪制一張平滑曲線圖來更好地展示一周之內(nèi)快遞的發(fā)貨數(shù)量，并通過該圖表展示快遞發(fā)貨數(shù)量的變化趨勢(shì)，幫助妙妙更好地了解快遞站的發(fā)貨情況，從而更好地管理快遞站的日常工作。本任務(wù)需要基于一周之內(nèi)快遞發(fā)貨數(shù)量繪制平滑曲線圖。一周之內(nèi)快遞發(fā)貨數(shù)量（單位：?jiǎn)危┤缦卤硭尽Ｖ芤恢芏苋芩闹芪逯芰苋?00508060110120130任務(wù)需求知識(shí)儲(chǔ)備1.初識(shí)平滑曲線圖

先定一個(gè)小目標(biāo)！了解平滑曲線圖的概念，能夠說出什么是平滑曲線圖知識(shí)儲(chǔ)備平滑曲線圖與之前學(xué)習(xí)過的基礎(chǔ)折線圖一樣，都可以用來反映數(shù)據(jù)隨著時(shí)間推移而產(chǎn)生的變化趨勢(shì)。它們的區(qū)別在于基礎(chǔ)折線圖更關(guān)注點(diǎn)數(shù)據(jù)，即短時(shí)間內(nèi)數(shù)據(jù)隨時(shí)間變化的趨勢(shì)；而平滑曲線圖更關(guān)注由點(diǎn)構(gòu)成的線數(shù)據(jù)，即整體數(shù)據(jù)在一段時(shí)間內(nèi)隨時(shí)間變化的趨勢(shì)。1.初識(shí)平滑曲線圖知識(shí)儲(chǔ)備平滑曲線圖的效果，如下圖所示。1.初識(shí)平滑曲線圖知識(shí)儲(chǔ)備2.數(shù)據(jù)集組件

先定一個(gè)小目標(biāo)！掌握數(shù)據(jù)集組件的使用方法，能夠使用數(shù)據(jù)集定義數(shù)據(jù)知識(shí)儲(chǔ)備在ECharts中，數(shù)據(jù)集組件用于管理數(shù)據(jù)。將數(shù)據(jù)設(shè)置在數(shù)據(jù)集組件中的優(yōu)勢(shì)如下。能夠貼近數(shù)據(jù)可視化的常見思維方式。首先提供數(shù)據(jù)，然后指定數(shù)據(jù)到視覺的映射，從而形成圖表。數(shù)據(jù)和其他配置可以被分離開來。在圖表中，數(shù)據(jù)會(huì)隨著場(chǎng)景改變而改變，但是標(biāo)題、提示框等配置項(xiàng)通常不會(huì)隨著場(chǎng)景的改變而改變，所以將數(shù)據(jù)和其他配置項(xiàng)分開易于管理。數(shù)據(jù)可以被多個(gè)系列或者組件復(fù)用，對(duì)于大數(shù)據(jù)量的場(chǎng)景，不必為每個(gè)系列都創(chuàng)建一份數(shù)據(jù)。支持更多數(shù)據(jù)的常用格式，例如二維數(shù)組、對(duì)象的形式，在一定程度上可避免轉(zhuǎn)換數(shù)據(jù)格式。2.數(shù)據(jù)集組件知識(shí)儲(chǔ)備通過option對(duì)象的dataset屬性可以配置數(shù)據(jù)集組件，dataset屬性的值為dataset對(duì)象，該對(duì)象的設(shè)置方式如下。varoption={dataset:{}};2.數(shù)據(jù)集組件知識(shí)儲(chǔ)備dataset對(duì)象的常用屬性為source屬性，該屬性用于定義數(shù)據(jù)。ECharts可以將dataset對(duì)象中定義的數(shù)據(jù)映射到系列中，形成圖表。source屬性的設(shè)置方式如下。varoption={dataset:{source:屬性值}};2.數(shù)據(jù)集組件知識(shí)儲(chǔ)備source屬性的值有3種形式，下面分別進(jìn)行講解。（1）source屬性的值是二維數(shù)組如果數(shù)據(jù)是二維表，可以用二維數(shù)組格式來生成二維表，在第1行或第1列中可以給出維度名，維度名用來定義二維數(shù)組中每一列的名稱。示例代碼如下。dataset:{source:[['food','數(shù)量'],['冰皮月餅',120],['五仁月餅',119],['酥皮月餅',110],['果蔬月餅',112]]}2.數(shù)據(jù)集組件知識(shí)儲(chǔ)備（2）source屬性的值是一維數(shù)組source屬性的值為一維數(shù)組時(shí)，數(shù)組中的每個(gè)元素均為對(duì)象，對(duì)象的屬性名表示維度名，屬性值表示該維度名的取值，示例代碼如下。dataset:{source:[{food:'冰皮月餅',count:120},{food:'五仁月餅',count:119},{food:'酥皮月餅',count:110},{food:'果蔬月餅',count:112}]}2.數(shù)據(jù)集組件知識(shí)儲(chǔ)備（3）source屬性的值是對(duì)象source屬性的值是對(duì)象時(shí)，對(duì)象的每個(gè)屬性表示二維數(shù)組的一列，示例代碼如下。dataset:{source:{

food:['冰皮月餅','五仁月餅','酥皮月餅','果蔬月餅'],

count:[120,119,110,112]}}2.數(shù)據(jù)集組件知識(shí)儲(chǔ)備3.平滑曲線的設(shè)置

先定一個(gè)小目標(biāo)！掌握平滑曲線圖的設(shè)置方法，能夠?qū)D表設(shè)置為平滑曲線圖知識(shí)儲(chǔ)備當(dāng)系列的type屬性值為line并且設(shè)置了smooth屬性時(shí)，圖表類型為平滑曲線圖。smooth屬性用于設(shè)置是否顯示平滑曲線，該屬性的值為布爾類型的數(shù)據(jù)或數(shù)字類型的數(shù)據(jù)，下面分別進(jìn)行講解。3.平滑曲線的設(shè)置知識(shí)儲(chǔ)備（1）smooth屬性的值為布爾類型的數(shù)據(jù)當(dāng)smooth屬性的值為布爾類型的數(shù)據(jù)時(shí)，若smooth屬性的值為true，則表示顯示平滑曲線；若smooth屬性的值為false，則表示不顯示平滑曲線。例如，使用smooth屬性設(shè)置平滑曲線圖的示例代碼如下。series:[{smooth:true,}]3.平滑曲線的設(shè)置知識(shí)儲(chǔ)備（2）smooth屬性的值為數(shù)字類型的數(shù)據(jù)當(dāng)smooth屬性的值為數(shù)字類型的數(shù)據(jù)時(shí)，smooth屬性的取值范圍為0到1。當(dāng)系列的type屬性值為line時(shí)，若smooth屬性的值為0，則生成基礎(chǔ)折線圖；若smooth屬性的值為1，則生成平滑曲線圖；若smooth屬性的值介于0和1之間，數(shù)字越接近1，生成的平滑曲線越彎曲，相反，數(shù)字越接近0，生成的平滑曲線越接近直線。3.平滑曲線的設(shè)置知識(shí)儲(chǔ)備使用smooth屬性設(shè)置平滑曲線圖的示例代碼如下。series:[{smooth:0.5}]3.平滑曲線的設(shè)置任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握平滑曲線圖的使用，能夠根據(jù)需求繪制平滑曲線圖任務(wù)實(shí)現(xiàn)創(chuàng)建curve.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，并將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置平滑曲線圖的配置項(xiàng)和數(shù)據(jù)。步驟3步驟4基于一周之內(nèi)快遞發(fā)貨數(shù)量繪制平滑曲線圖任務(wù)實(shí)現(xiàn)瀏覽器中打開curve.html文件，一周之內(nèi)快遞發(fā)貨數(shù)量的平滑曲線圖效果如下圖所示。常見的餅圖2.2繪制基礎(chǔ)餅圖【任務(wù)2.2.1】任務(wù)需求“春有百花秋有月，夏有涼風(fēng)冬有雪?！毙⑹且粋€(gè)經(jīng)營了多家水果店的老板，他深知成功離不開“順勢(shì)而為”。近年來，他經(jīng)常在季節(jié)交替時(shí)分析店鋪內(nèi)水果的銷售情況，準(zhǔn)確了解消費(fèi)者的偏好，并進(jìn)一步優(yōu)化熱門商品的供應(yīng)和銷售策略，以占據(jù)更大的市場(chǎng)份額。小劉希望繪制一張基礎(chǔ)餅圖來更好地展示店鋪中夏季部分水果的銷量占比情況。本任務(wù)需要基于某店鋪夏季部分水果的銷量繪制基礎(chǔ)餅圖。某店鋪夏季部分水果的銷量（單位：kg）如下表所示。蘋果西瓜葡萄柚子400600200300知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)餅圖

先定一個(gè)小目標(biāo)！了解基礎(chǔ)餅圖的概念，能夠說出基礎(chǔ)餅圖的設(shè)置方式知識(shí)儲(chǔ)備基礎(chǔ)餅圖由多個(gè)扇形區(qū)域組成，每個(gè)扇形區(qū)域的面積與該數(shù)據(jù)所占比例成正比，從而形成一個(gè)類似“餅”的圖形。在ECharts中繪制基礎(chǔ)餅圖時(shí)，需要將系列中的type屬性的值設(shè)置為pie，示例代碼如下。series:[{type:'pie'}]1.初識(shí)基礎(chǔ)餅圖知識(shí)儲(chǔ)備基礎(chǔ)餅圖的效果如下圖所示。1.初識(shí)基礎(chǔ)餅圖知識(shí)儲(chǔ)備2.餅圖的半徑

先定一個(gè)小目標(biāo)！掌握餅圖半徑的使用方法，能夠設(shè)置餅圖的半徑知識(shí)儲(chǔ)備在ECharts中，當(dāng)系列的type屬性值被設(shè)置為pie并且設(shè)置了radius屬性時(shí)，即可設(shè)置餅圖的半徑。radius屬性的示例代碼如下。series:[{type:'pie',radius:'20%'}]2.餅圖的半徑知識(shí)儲(chǔ)備radius屬性值可以為以下3種類型的數(shù)據(jù)。數(shù)字：radius屬性值為數(shù)字類型的像素值，直接指定外半徑值。百分比字符串：例如'20%'，表示外半徑為可視區(qū)域尺寸的20%。當(dāng)radius屬性值為百分比字符串時(shí)，它是相對(duì)于容器寬度、容器高度中較短的一條邊的。如果寬度大于高度，則百分比是相對(duì)于高度的。數(shù)組：數(shù)組中的第一項(xiàng)表示內(nèi)半徑，第二項(xiàng)表示外半徑。如果內(nèi)半徑為0且外半徑不為0，則對(duì)應(yīng)的圖表類型為基礎(chǔ)餅圖；如果內(nèi)半徑、外半徑均不為0，則對(duì)應(yīng)的圖表類型為圓環(huán)圖（或稱為環(huán)形圖），圓環(huán)圖為基礎(chǔ)餅圖的一種變形。2.餅圖的半徑知識(shí)儲(chǔ)備

radius屬性值為數(shù)組的示例代碼如下。series:[{type:'pie',radius:['40%','70%']}]2.餅圖的半徑知識(shí)儲(chǔ)備3.餅圖的文本標(biāo)簽

先定一個(gè)小目標(biāo)！掌握餅圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等知識(shí)儲(chǔ)備當(dāng)系列的type屬性值為pie，并且設(shè)置了label屬性時(shí)，即可設(shè)置餅圖的文本標(biāo)簽。label屬性的值為label對(duì)象，餅圖中l(wèi)abel對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示文本標(biāo)簽，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示position用于設(shè)置文本標(biāo)簽的位置，默認(rèn)值為outside，表示位于餅圖扇區(qū)外側(cè)。設(shè)為inside或inner表示位于餅圖扇區(qū)內(nèi)部；設(shè)為center表示位于餅圖中心位置formatter用于設(shè)置圖表文本標(biāo)簽內(nèi)容的格式，允許用戶自定義和格式化文本標(biāo)簽的內(nèi)容3.餅圖的文本標(biāo)簽知識(shí)儲(chǔ)備formatter屬性常用于標(biāo)題組件和提示框組件中懸浮框提示層信息的格式化、坐標(biāo)軸刻度上面的刻度格式化等