ECharts數(shù)據(jù)可視化課件 第3章 柱狀圖和散點(diǎn)圖

第3章柱狀圖和散點(diǎn)圖《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target

掌握柱條背景樣式的設(shè)置方法，能夠設(shè)置柱條的背景色、背景描邊色、背景描邊

類型等

掌握柱狀圖標(biāo)線的使用方法，能夠設(shè)置最大值標(biāo)線、最小值標(biāo)線、平均值標(biāo)線等熟悉柱條寬度和間距的設(shè)置方法，能夠總結(jié)柱條寬度、最大寬度、最小寬度、

間距的用法掌握?qǐng)D形和標(biāo)簽高亮樣式的設(shè)置方法，能夠設(shè)置圖形和標(biāo)簽高亮樣式掌握柱條樣式的設(shè)置方法，能夠設(shè)置柱條的顏色、描邊線寬、描邊色、陰影、

不透明度等學(xué)習(xí)目標(biāo)/Target

掌握柱狀圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等

掌握柱狀圖標(biāo)注樣式的使用方法，能夠設(shè)置標(biāo)注信息掌握坐標(biāo)軸組件中分隔線的使用方法，能夠設(shè)置x軸、y軸的分隔線掌握坐標(biāo)軸組件中不顯示零刻度的設(shè)置，能夠?qū)崿F(xiàn)x軸、y軸上零刻度的顯示與隱藏掌握漣漪動(dòng)畫的相關(guān)配置，能夠設(shè)置漣漪動(dòng)畫的大小、顏色、周期等學(xué)習(xí)目標(biāo)/Target

掌握漣漪動(dòng)畫顯示時(shí)機(jī)的設(shè)置，能夠控制漣漪動(dòng)畫何時(shí)開始顯示

掌握常見柱狀圖的繪制，能夠完成基礎(chǔ)柱狀圖、堆疊柱狀圖、階梯瀑布圖和

堆疊條形圖的繪制掌握常見散點(diǎn)圖的繪制，能夠完成基礎(chǔ)散點(diǎn)圖、帶有漣漪動(dòng)畫的散點(diǎn)圖、

氣泡圖的繪制章節(jié)概述/Summary通過對(duì)第2章的學(xué)習(xí)，大家應(yīng)該已經(jīng)掌握了繪制常見折線圖和餅圖的方法，以及ECharts中常用組件的基本使用。通過配置項(xiàng)的設(shè)置，可以實(shí)現(xiàn)所需折線圖和餅圖的效果。接下來，本章將講解如何繪制常見的柱狀圖和散點(diǎn)圖。目錄/Contents3.13.2常見的柱狀圖常見的散點(diǎn)圖常見的柱狀圖3.1繪制基礎(chǔ)柱狀圖【任務(wù)3.1.1】任務(wù)需求小蔡是一家小超市的老板，售賣多種商品。他想以柱狀圖的形式查看某款洗發(fā)水在過去一年中每個(gè)月的銷售情況，根據(jù)銷量來決定以后的進(jìn)貨量，以便更好地管理庫存。為此，他翻看了該款商品過去一年的銷售數(shù)據(jù)，并將這些數(shù)據(jù)匯總在月銷售情況報(bào)表中。本任務(wù)需要基于某款洗發(fā)水一年的銷售情況繪制基礎(chǔ)柱狀圖。某款洗發(fā)水一年的銷售情況（單位：瓶）如下表所示。月份銷量1月7402月9003月7004月8005月9206月750任務(wù)需求月份銷量7月4008月6009月55010月29011月39212月400知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)柱狀圖

先定一個(gè)小目標(biāo)！了解基礎(chǔ)柱狀圖的概念，能夠說出什么是基礎(chǔ)柱狀圖知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)柱狀圖基礎(chǔ)柱狀圖是一種簡(jiǎn)單明了、易于理解的數(shù)據(jù)可視化圖表。一般來說，基礎(chǔ)柱狀圖通常由x軸（橫軸）、y軸（縱軸）和柱條（矩形）組成，用于展示分類數(shù)據(jù)的分布情況，它能夠讓用戶直觀地了解數(shù)據(jù)的規(guī)模、趨勢(shì)和分布情況。知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)柱狀圖縱向基礎(chǔ)柱狀圖在縱向基礎(chǔ)柱狀圖中，x軸一般為類目軸，代表不同的數(shù)據(jù)類型或分類；y軸一般為數(shù)值軸，代表數(shù)據(jù)數(shù)量、大小或比例。一般來說，縱向基礎(chǔ)柱狀圖的數(shù)據(jù)量不宜過多，否則會(huì)導(dǎo)致圖表過于擁擠、難以閱讀。橫向基礎(chǔ)柱狀圖在橫向基礎(chǔ)柱狀圖中，x軸一般為數(shù)值軸，代表數(shù)據(jù)數(shù)量、大小或比例；y軸一般為類目軸，代表不同的數(shù)據(jù)類型或分類。根據(jù)坐標(biāo)軸的布局方式不同，分為縱向基礎(chǔ)柱狀圖和橫向基礎(chǔ)柱狀圖（條形圖）兩種表現(xiàn)方式。知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)柱狀圖（1）縱向基礎(chǔ)柱狀圖縱向基礎(chǔ)柱狀圖的效果如下圖所示。x軸為類目軸，y軸為數(shù)值軸，第1根柱條的長度代表香蕉的銷量，第2根柱條的長度代表蘋果的銷量。知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)柱狀圖（2）橫向基礎(chǔ)柱狀圖橫向基礎(chǔ)柱狀圖的效果如下圖所示。x軸為數(shù)值軸，y軸為類目軸，從下往上數(shù)第1根柱條的長度代表香蕉的銷量，第2根柱條的長度代表蘋果的銷量。知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)柱狀圖在ECharts中繪制基礎(chǔ)柱狀圖時(shí)，需要將系列的type屬性的值設(shè)置為bar。series:[{type:'bar'}]指定該系列圖表類型為基礎(chǔ)柱狀圖知識(shí)儲(chǔ)備2.柱條的背景樣式

先定一個(gè)小目標(biāo)！掌握柱條背景樣式的設(shè)置方法，能夠設(shè)置柱條的背景色、背景描邊色、背景描邊類型等知識(shí)儲(chǔ)備2.柱條的背景樣式注意：使用backgroundStyle屬性時(shí)必須將showBackground屬性的值設(shè)置為true才能生效，showBackground屬性用于設(shè)置是否顯示柱條的背景色。設(shè)置方式：通過系列的backgroundStyle屬性可以設(shè)置柱條的背景樣式。series:[{type:'bar',showBackground:true,backgroundStyle:{}}]柱條的背景樣式包括背景色、背景描邊色、背景描邊類型等。知識(shí)儲(chǔ)備2.柱條的背景樣式backgroundStyle屬性的值為backgroundStyle對(duì)象，backgroundStyle對(duì)象的常用屬性如下。屬性說明color用于設(shè)置柱條的背景色，支持使用RGB、RGBA、十六進(jìn)制顏色格式，也支持使用漸變色和紋理填充borderColor用于設(shè)置柱條的背景描邊色，默認(rèn)值為#000borderWidth用于設(shè)置柱條的背景描邊寬度，默認(rèn)不描邊borderType用于設(shè)置柱條的背景描邊類型，可選值有solid（默認(rèn)值）、dashed、dotted，分別表示實(shí)線、虛線、點(diǎn)線borderRadius用于設(shè)置柱條的背景圓角半徑，支持以數(shù)組的方式分別指定4個(gè)圓角的半徑，表示順時(shí)針方向從左上角開始的左上、右上、右下和左下四個(gè)角的半徑值opacity用于設(shè)置柱條的背景不透明度，取值范圍為0~1，為0時(shí)不繪制圖形，默認(rèn)值為1shadowBlur用于設(shè)置柱條背景陰影的模糊大小shadowColor用于設(shè)置柱條背景陰影的顏色，支持的格式同color屬性shadowOffsetX用于設(shè)置柱條背景陰影水平方向上的偏移距離shadowOffsetY用于設(shè)置柱條背景陰影垂直方向上的偏移距離知識(shí)儲(chǔ)備2.柱條的背景樣式設(shè)置柱條的背景樣式的示例代碼如下。series:[

{

type:'bar',

showBackground:true,

backgroundStyle:{

color:'rgba(180,180,180,0.2)',

borderColor:'red',

borderWidth:4,borderType:'solid',

borderRadius:10,opacity:0.2,

shadowBlur:2,shadowColor:'blue',

shadowOffsetX:4,

shadowOffsetY:3

}

}]在backgroundStyle對(duì)象中設(shè)置了柱條的一系列背景樣式屬性。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握基礎(chǔ)柱狀圖的使用，能夠根據(jù)需求繪制基礎(chǔ)柱狀圖任務(wù)實(shí)現(xiàn)創(chuàng)建D:\ECharts\chapter03目錄，并使用VSCode編輯器打開該目錄。放入echarts.js文件。創(chuàng)建bar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2步驟3基于某款洗發(fā)水一年的銷售情況繪制基礎(chǔ)柱狀圖初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。根據(jù)任務(wù)需求給出的表格中的月份定義x軸的數(shù)據(jù)。根據(jù)任務(wù)需求給出的表格中的銷量定義y軸的數(shù)據(jù)。設(shè)置基礎(chǔ)柱狀圖的配置項(xiàng)和數(shù)據(jù)。步驟4步驟8步驟5步驟6步驟7任務(wù)實(shí)現(xiàn)瀏覽器中打開bar.html文件，某款洗發(fā)水一年的銷售情況的柱狀圖效果如下圖所示。通過該柱狀圖可以直觀地看出各月份洗發(fā)水的銷量，例如，該洗發(fā)水在1~6月的銷量相對(duì)較高，而在7~12月的銷量則相對(duì)較低。繪制堆疊柱狀圖【任務(wù)3.1.2】任務(wù)需求小明是互聯(lián)網(wǎng)公司的運(yùn)營總監(jiān)，負(fù)責(zé)收集并統(tǒng)計(jì)某網(wǎng)站的訪問量，他想以堆疊柱狀圖的形式查看該網(wǎng)站在直接訪問、廣告和搜索引擎這3種渠道下的訪問量，以便制定后續(xù)的運(yùn)營方案。因此，他整理了最近一周網(wǎng)站在這3種渠道下的訪問量數(shù)據(jù)。本任務(wù)需要基于近一周的網(wǎng)站訪問量繪制堆疊柱狀圖。任務(wù)需求近一周的網(wǎng)站訪問量（單位：次）如下表所示。星期直接訪問廣告搜索引擎郵件營銷聯(lián)盟廣告視頻廣告百度搜狗周一320120220150620242周二332132182232732286周三301101191201701263周四334134234154734292周五390902901901090589周六3302303303301130470周日3202103104101120450知識(shí)儲(chǔ)備1.初識(shí)堆疊柱狀圖

先定一個(gè)小目標(biāo)！了解堆疊柱狀圖的概念，能夠說出什么是堆疊柱狀圖知識(shí)儲(chǔ)備1.初識(shí)堆疊柱狀圖在實(shí)際開發(fā)中，當(dāng)需要展示不同系列數(shù)值的總和時(shí)，可以使用堆疊柱狀圖實(shí)現(xiàn)。堆疊柱狀圖沿著垂直方向繪制，柱條的高度表示數(shù)據(jù)的大小，每個(gè)數(shù)據(jù)系列的柱條在同一類別上按照堆疊方式排列，相鄰系列的柱條被堆疊在一起。知識(shí)儲(chǔ)備1.初識(shí)堆疊柱狀圖設(shè)置方式：將系列的type屬性的值設(shè)置為bar并為每個(gè)系列設(shè)置相同的stack屬性值。簡(jiǎn)單的堆疊柱狀圖效果如下圖所示。A店鋪、B店鋪、C店鋪的柱條高度表示對(duì)應(yīng)店鋪中蘋果、香蕉和藍(lán)莓的銷量總和。知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線

先定一個(gè)小目標(biāo)！掌握柱狀圖標(biāo)線的使用方法，能夠設(shè)置最大值標(biāo)線、最小值標(biāo)線、平均值標(biāo)線等知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線柱狀圖中最大值標(biāo)線、平均值標(biāo)線、最小值標(biāo)線，如下圖所示。知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線設(shè)置方式：通過系列中的markLine屬性可以設(shè)置標(biāo)線的一系列樣式。series:[

{

markLine:{}

}]用于設(shè)置標(biāo)線的文本標(biāo)簽、線條的樣式等知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線markLine屬性的值為markLine對(duì)象，markLine對(duì)象的常用屬性如下表所示。屬性說明label用于設(shè)置標(biāo)線文本標(biāo)簽的樣式symbol用于設(shè)置標(biāo)線兩端的標(biāo)記圖形的形狀symbolSize用于設(shè)置標(biāo)線兩端的標(biāo)記大小lineStyle用于設(shè)置標(biāo)線的線條樣式，包括線條的顏色、寬度、類型等data用于設(shè)置標(biāo)線的數(shù)據(jù)知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線（1）label屬性label屬性的值為label對(duì)象，柱狀圖中標(biāo)線的label對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示標(biāo)線的文本標(biāo)簽，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示position用于設(shè)置標(biāo)線文本標(biāo)簽的位置，可選值有end（默認(rèn)值）、start、middle，分別表示位于線的結(jié)束點(diǎn)、線的起始點(diǎn)、線的中點(diǎn)distance用于設(shè)置標(biāo)簽與標(biāo)線的間距。如果是數(shù)組，第1項(xiàng)為橫向間距，第2項(xiàng)為縱向間距。如果是數(shù)字，則表示橫向、縱向使用相同的間距color用于設(shè)置標(biāo)線文字的顏色，默認(rèn)值為#ffffontSize用于設(shè)置標(biāo)線文字的字體大小fontWeight用于設(shè)置標(biāo)線文字字體的粗細(xì)，可選值有normal（默認(rèn)值）、bold（粗體）、bolder（更加粗的字體）、lighter（更加細(xì)的字體），也可以設(shè)置為具體的數(shù)值知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線（2）symbol屬性markLine對(duì)象的symbol屬性用于設(shè)置標(biāo)記圖形的形狀，常見的可選值如下。pin：大頭針形circle：圓形rect：矩形roundRect：圓角矩形triangle：三角形diamond：菱形arrow：箭頭形none：無如果不想用這些形狀，還可以直接使用圖片的鏈接或者dataURI的方式將標(biāo)記圖形設(shè)置為圖片。知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線（3）lineStyle屬性lineStyle屬性的值為lineStyle對(duì)象，柱狀圖中標(biāo)線的lineStyle對(duì)象的常用屬性如下表所示。屬性說明color用于設(shè)置標(biāo)線的顏色width用于設(shè)置標(biāo)線的寬度type用于設(shè)置標(biāo)線的類型，可選值有solid（默認(rèn)值）、dashed、dotted，分別表示實(shí)線、虛線、點(diǎn)線cap用于設(shè)置標(biāo)線末端的繪制方式，可選值有butt、round、square，分別表示線段末端以方形結(jié)束、線段末端以圓形結(jié)束，線段末端以方形結(jié)束（會(huì)增加一個(gè)寬度和線段寬度相同、高度是線段厚度一半的矩形區(qū)域）opacity用于設(shè)置標(biāo)線的不透明度，默認(rèn)值為1，取值范圍為[0,1]，為0時(shí)不繪制該圖形curveness用于設(shè)置標(biāo)線的曲度，取值范圍為[0,1]，默認(rèn)值為0（直線），值越大曲度越大知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線（4）data屬性data屬性的值是一個(gè)數(shù)組，數(shù)組的每個(gè)元素可以是一個(gè)對(duì)象或一個(gè)數(shù)組，表示不同類型的標(biāo)線。①當(dāng)data屬性值為一個(gè)數(shù)組，且數(shù)組中的每個(gè)元素為一個(gè)對(duì)象時(shí)，語法格式如下。data:[{type:'可選值',name:'標(biāo)線名稱'}]type：表示標(biāo)線的類型，可選值有min（最小值）、max（最大值）、average（平均值）等。name：表示標(biāo)線的名稱。知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線②當(dāng)data屬性值為一個(gè)數(shù)組，且數(shù)組中的每個(gè)元素為一個(gè)數(shù)組時(shí)，語法格式如下。data:[[{type:'可選值',name:'標(biāo)線名稱'},{type:'可選值',name:'標(biāo)線名稱'}]]數(shù)組中的第1個(gè)對(duì)象指定了標(biāo)線的起點(diǎn)，第2個(gè)對(duì)象指定了標(biāo)線的終點(diǎn)。知識(shí)儲(chǔ)備2.柱狀圖的標(biāo)線設(shè)置柱狀圖標(biāo)線樣式的示例代碼如下。series:[{markLine:{label:{poisition:'middle',color:'red'},symbol:'circle',lineStyle:{type:'dashed‘},data:[[{type:'min'},{type:'max'}]]}}]設(shè)置標(biāo)線的位置位于線的中點(diǎn)、文字的顏色為red標(biāo)記圖形的形狀為圓形設(shè)置標(biāo)線的類型為虛線當(dāng)前系列中的最小值和最大值知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉柱條寬度的設(shè)置方法，能夠總結(jié)柱條寬度、最大寬度、最小寬度的用法3.柱條的寬度知識(shí)儲(chǔ)備3.柱條的寬度設(shè)置方式：通過barWidth屬性可以設(shè)置柱條的寬度。①當(dāng)barWidth屬性的值為一個(gè)數(shù)字時(shí)，該值表示像素值。②當(dāng)barWidth屬性的值為字符串時(shí)，該字符串需要包含單位，例如20%、40px等。使用barWidth屬性設(shè)置柱條寬度的示例代碼如下。series:[{type:'bar',data:[10,20,30,40,50],barWidth:20}]barWidth屬性值設(shè)置為20，這將使所有柱條的寬度都相同，都為20像素。barWidth屬性barMaxWidth屬性barMinWidth屬性知識(shí)儲(chǔ)備3.柱條的寬度柱條的最大和最小寬度的設(shè)置方式：通過barMaxWidth屬性和barMinWidth屬性可以設(shè)置柱條的最大寬度和最小寬度。barWidth屬性、barMaxWidth屬性和barMinWidth屬性的優(yōu)先級(jí)：對(duì)于一些數(shù)據(jù)很小的情況，可以通過barMinHeight屬性為柱條指定最小高度，當(dāng)某個(gè)數(shù)據(jù)的值所對(duì)應(yīng)的柱條高度小于barMinHeight屬性的值時(shí)，該柱條的高度將會(huì)變?yōu)樽钚「叨?。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉柱條間距的設(shè)置方法，能夠總結(jié)柱條間距的用法4.柱條的間距知識(shí)儲(chǔ)備4.柱條的間距設(shè)置方式：通過barGap屬性和barCategoryGap屬性可以設(shè)置柱條的間距。①barGap屬性用于設(shè)置不同系列在同一類目下的距離，取百分比字符串值，如20%。②barCategoryGap屬性用于設(shè)置不同類目的距離，默認(rèn)為類目間距的20%，也可設(shè)置為具體的像素值或百分比字符串值。設(shè)置柱條間距的示例代碼如下。series:[{type:'bar',data:[10,20,30,40,50],barGap:'20%',barCategoryGap:'40%'}]注意：在設(shè)置了barGap屬性和barCategoryGap屬性之后，可以省略barWidth屬性的設(shè)置，省略后，柱條的寬度將自動(dòng)調(diào)整。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握?qǐng)D形和標(biāo)簽高亮樣式的設(shè)置方法，能夠設(shè)置圖形和標(biāo)簽高亮樣式5.圖形和標(biāo)簽高亮樣式知識(shí)儲(chǔ)備5.圖形和標(biāo)簽高亮樣式當(dāng)鼠標(biāo)指針移入圖形元素時(shí)，圖形和標(biāo)簽通常會(huì)具有高亮顯示的樣式效果。默認(rèn)情況下，高亮顯示的樣式效果是基于普通樣式自動(dòng)生成的，若想要自定義高亮樣式，則可以通過系列中的emphasis屬性手動(dòng)設(shè)置，如改變顏色、增加陰影等。設(shè)置方式：通過系列中的emphasis屬性手動(dòng)設(shè)置。series:[{emphasis:{}}]知識(shí)儲(chǔ)備5.圖形和標(biāo)簽高亮樣式emphasis屬性的值為emphasis對(duì)象，emphasis對(duì)象的常用屬性如下表所示。屬性說明disabled用于設(shè)置是否關(guān)閉高亮狀態(tài)，默認(rèn)值為false，表示不關(guān)閉高亮狀態(tài)focus用于設(shè)置在高亮顯示圖形時(shí)，是否淡出其他數(shù)據(jù)的圖形以達(dá)到聚焦的效果blurScope用于在開啟focus的時(shí)候，配置淡出的范圍label用于設(shè)置柱條上的文本標(biāo)簽，可說明柱條的一些數(shù)據(jù)信息，如值、名稱等，label屬性值默認(rèn)值為false，表示不顯示文本標(biāo)簽知識(shí)儲(chǔ)備5.圖形和標(biāo)簽高亮樣式（1）focus屬性的常用可選值如下。none：表示不淡出其他圖形的高亮顯示，為默認(rèn)值。self：表示當(dāng)鼠標(biāo)指針移入數(shù)據(jù)項(xiàng)時(shí)，只有當(dāng)前數(shù)據(jù)項(xiàng)所在系列的圖形會(huì)高亮顯示。series：表示當(dāng)鼠標(biāo)指針移入數(shù)據(jù)系列時(shí)，該系列中所有數(shù)據(jù)項(xiàng)的圖形都會(huì)高亮顯示。（2）blurScope屬性的常用可選值如下。coordinateSystem：表示淡出范圍為當(dāng)前坐標(biāo)系，為默認(rèn)值。series：表示淡出范圍為系列。global：表示淡出范圍為全局。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握堆疊柱狀圖的使用，能夠根據(jù)需求繪制堆疊柱狀圖任務(wù)實(shí)現(xiàn)創(chuàng)建stackedBar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)了指定寬度和高度的父容器。步驟1步驟2基于近一周的網(wǎng)站訪問量繪制堆疊柱狀圖初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。根據(jù)任務(wù)需求給出的表格中的星期定義x軸的數(shù)據(jù)。設(shè)置堆疊柱狀圖的配置項(xiàng)和數(shù)據(jù)。步驟5步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開stackedBar.html文件，近一周的網(wǎng)站訪問量的堆疊柱狀圖效果如下圖所示。第2根柱條由郵件營銷、聯(lián)盟廣告和視頻廣告3種不同類型廣告的數(shù)據(jù)堆疊而成，第2根柱條的長度代表這3種不同廣告的數(shù)據(jù)總和。第4根柱條也是堆疊的，由百度和搜狗兩種不同類型搜索引擎的數(shù)據(jù)組成。第3根柱條表示第4根柱條中的兩種搜索引擎的數(shù)據(jù)總和。該圖中還使用了標(biāo)線來標(biāo)記搜索引擎數(shù)據(jù)的最低點(diǎn)指向最高點(diǎn)。任務(wù)實(shí)現(xiàn)當(dāng)鼠標(biāo)指針移入周一所在的直接訪問系列的柱條上時(shí)高亮效果如下圖所示。當(dāng)鼠標(biāo)指針移入周一所在直接訪問系列的柱條時(shí)，該系列中所有數(shù)據(jù)項(xiàng)的圖形都高亮顯示，并顯示當(dāng)前柱條所對(duì)應(yīng)的數(shù)據(jù)為320。繪制階梯瀑布圖【任務(wù)3.1.3】任務(wù)需求勤儉節(jié)約是一種值得每個(gè)人都踐行的美德。在日常生活中，勤儉節(jié)約精神不僅能夠幫助我們實(shí)現(xiàn)個(gè)人的財(cái)務(wù)穩(wěn)定，還能夠推動(dòng)整個(gè)社會(huì)的可持續(xù)發(fā)展。小浩為了評(píng)估自己的每月支出是否合理，他整理了上個(gè)月必須支出的基本開銷，作為分析的示例。小浩希望通過階梯瀑布圖的形式呈現(xiàn)上個(gè)月基本開銷的具體情況，以更加直觀和清晰地顯示數(shù)據(jù)。本任務(wù)需要基于上個(gè)月基本開銷繪制階梯瀑布圖。任務(wù)需求上個(gè)月基本開銷（單位：元）如下表所示。日用品費(fèi)伙食費(fèi)交通費(fèi)水電費(fèi)房租3001100200300900知識(shí)儲(chǔ)備1.初識(shí)階梯瀑布圖

先定一個(gè)小目標(biāo)！了解階梯瀑布圖的概念，能夠說出什么是階梯瀑布圖知識(shí)儲(chǔ)備1.初識(shí)階梯瀑布圖階梯瀑布圖主要用于展示數(shù)據(jù)中各個(gè)數(shù)值之間的逐級(jí)變化情況。在ECharts中，沒有單獨(dú)的階梯瀑布圖，但可以使用堆疊柱狀圖來模擬該效果。具體的做法是將每根柱子的堆疊部分的顏色和邊框設(shè)置為透明，這樣就可以在視覺上形成階梯瀑布圖的效果。簡(jiǎn)單的堆疊柱狀圖模擬的階梯瀑布圖效果如下圖所示。知識(shí)儲(chǔ)備1.初識(shí)階梯瀑布圖在階梯瀑布圖中，堆疊部分的數(shù)值為前一個(gè)元素的堆疊部分?jǐn)?shù)值減去當(dāng)前元素的實(shí)際值。假設(shè)月消費(fèi)的總費(fèi)用由支出1、支出2、支出3、支出4、支出5組成，對(duì)應(yīng)的數(shù)據(jù)如下。vardata=[600,110,180,80,150,80];根據(jù)以上數(shù)據(jù)計(jì)算堆疊部分的數(shù)值：

第一根柱條的堆疊部分?jǐn)?shù)值固定為0；

第二根柱條的堆疊部分?jǐn)?shù)值為“總費(fèi)用-支出1”的值，即600-110，結(jié)果為490；

第三根柱條的堆疊部分?jǐn)?shù)值為“第二根柱條的堆疊部分?jǐn)?shù)值-支出2”的值，即490-180，結(jié)果為310。以此類推。堆疊部分?jǐn)?shù)值計(jì)算結(jié)果：vardata=[0,490,310,230,80,0];知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握柱條樣式的設(shè)置方法，能夠設(shè)置柱條的顏色、描邊線寬、描邊色、陰影、不透明度等2.柱條的樣式知識(shí)儲(chǔ)備2.柱條的樣式series:[{itemStyle:{}}]設(shè)置方式：通過itemStyle屬性可以設(shè)置柱條的樣式。柱條的樣式包括柱條的顏色、描邊線寬、描邊色、陰影、不透明度等。知識(shí)儲(chǔ)備2.柱條的樣式itemStyle屬性的值為itemStyle對(duì)象，itemStyle對(duì)象的常用屬性如下表所示。屬性說明color用于設(shè)置柱條的顏色boderColor用于設(shè)置柱條的描邊色，默認(rèn)值為#000borderWidth用于設(shè)置柱條的描邊線寬，默認(rèn)不描邊borderType用于設(shè)置柱條的描邊類型，可選值有solid（默認(rèn)值）、dashed、dotted，分別表示實(shí)線、虛線、點(diǎn)線borderRadius用于設(shè)置柱條圓角的半徑opacity用于設(shè)置柱條的透明度，支持0~1的數(shù)字，為0時(shí)不繪制該圖形shadowBlur用于設(shè)置圖形陰影的模糊大小shadowColor用于設(shè)置陰影的顏色shadowOffsetX用于設(shè)置陰影水平方向上的偏移距離shadowOffsetY用于設(shè)置陰影垂直方向上的偏移距離知識(shí)儲(chǔ)備2.柱條的樣式設(shè)置柱條樣式的示例代碼如下。series:[{type:'bar',itemStyle:{color:'rgba(180,180,180,0.2)',borderColor:'red',borderWidth:4,borderType:'solid',borderRadius:10,opacity:0.2,shadowBlur:2,

shadowColor:'blue',shadowOffsetX:4,shadowOffsetY:3}}]在itemStyle對(duì)象中設(shè)置了柱條的一系列樣式。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握柱狀圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等3.柱狀圖的文本標(biāo)簽柱條的文本標(biāo)簽可以讓用戶更直觀地了解柱狀圖中每根柱條的具體數(shù)值，從而方便比較和分析。屬性說明show用于設(shè)置是否顯示柱條的文本標(biāo)簽，默認(rèn)值為false，表示不顯示，設(shè)為true表示顯示position用于設(shè)置柱條的文本標(biāo)簽的位置distance用于設(shè)置柱條的文本標(biāo)簽與柱條的距離rotate用于設(shè)置柱條的文本標(biāo)簽旋轉(zhuǎn)的角度，取值范圍為-90°到90°，正值表示逆時(shí)針旋轉(zhuǎn)formatter用于設(shè)置柱條的文本標(biāo)簽內(nèi)容格式器知識(shí)儲(chǔ)備3.柱狀圖的文本標(biāo)簽設(shè)置方式：通過設(shè)置label屬性給柱條添加文本標(biāo)簽，顯示柱條對(duì)應(yīng)的數(shù)據(jù)值。label屬性的值為label對(duì)象，柱狀圖中l(wèi)abel對(duì)象的常用屬性如下表所示。知識(shí)儲(chǔ)備3.柱狀圖的文本標(biāo)簽position屬性用于設(shè)置文本標(biāo)簽的位置，常用的可選值如下。top：用于設(shè)置文本標(biāo)簽位于柱條上方。bottom：用于設(shè)置文本標(biāo)簽位于柱條下方。inside：用于設(shè)置文本標(biāo)簽位于柱條內(nèi)部，為默認(rèn)值。insideTop：用于設(shè)置文本標(biāo)簽位于柱條頂部。insideBottom：用于設(shè)置文本標(biāo)簽位于柱條底部。insideLeft：用于設(shè)置文本標(biāo)簽位于柱條左側(cè)。insideRight：用于設(shè)置文本標(biāo)簽位于柱條右側(cè)。insideTopLeft：用于設(shè)置文本標(biāo)簽位于柱條頂部左側(cè)。insideTopRight：用于設(shè)置文本標(biāo)簽位于柱條頂部右側(cè)。insideBottomLeft：用于設(shè)置文本標(biāo)簽位于柱條底部左側(cè)。insideBottomRight：用于設(shè)置文本標(biāo)簽位于柱條底部右側(cè)。知識(shí)儲(chǔ)備3.柱狀圖的文本標(biāo)簽position屬性的值還可以是一個(gè)數(shù)組，數(shù)組中的元素可以是百分比字符串或像素值，用于表示一個(gè)具體位置。//百分比字符串position:['50%','50%'],//像素值position:[10,10],當(dāng)position屬性的值為['50%','50%']時(shí)，表示文本標(biāo)簽的位置在圖形區(qū)域的中心，第1個(gè)元素'50%'表示文本標(biāo)簽在x軸方向上偏移圖形區(qū)域?qū)挾鹊囊话?，?個(gè)元素'50%'表示文本標(biāo)簽在y軸方向上偏移圖形區(qū)域高度的一半。當(dāng)position屬性的值為[10,10]時(shí)，表示文本標(biāo)簽位于坐標(biāo)系中的

(10,10)點(diǎn)。其中，x軸的坐標(biāo)值為10，y軸的坐標(biāo)值為10。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握階梯瀑布圖的使用，能夠根據(jù)需求繪制階梯瀑布圖任務(wù)實(shí)現(xiàn)創(chuàng)建waterfallBar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2基于上個(gè)月基本開銷繪制階梯瀑布圖初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。步驟3步驟4設(shè)置堆疊瀑布圖的配置項(xiàng)和數(shù)據(jù)。任務(wù)實(shí)現(xiàn)瀏覽器中打開waterfallBar.html文件，上個(gè)月基本開銷的階梯瀑布圖效果如下圖所示。通過該階梯瀑布圖可以直觀地看出每項(xiàng)支出的金額。例如，當(dāng)月支出項(xiàng)中伙食費(fèi)最高，而交通費(fèi)最少。繪制堆疊條形圖【任務(wù)3.1.4】任務(wù)需求從1月份開始，某化妝品公司在六大商場(chǎng)鋪設(shè)了6款熱銷產(chǎn)品的專柜，并加大了優(yōu)惠促銷的力度?；顒?dòng)結(jié)束后，由專員統(tǒng)計(jì)了6款產(chǎn)品在各大商場(chǎng)的銷量，并將不同產(chǎn)品在不同商場(chǎng)的銷量情況整理成表格。為了更好地呈現(xiàn)數(shù)據(jù)，公司想以堆疊條形圖的形式展示不同產(chǎn)品在不同商場(chǎng)的銷量。本任務(wù)需要基于不同產(chǎn)品在不同商場(chǎng)的銷量繪制堆疊條形圖。任務(wù)需求不同產(chǎn)品在不同商場(chǎng)的銷量（單位：件）如下表所示。商場(chǎng)產(chǎn)品1產(chǎn)品2產(chǎn)品3產(chǎn)品4產(chǎn)品5產(chǎn)品6A商場(chǎng)320302301334330490B商場(chǎng)320332320334330480C商場(chǎng)220182191234330290D商場(chǎng)150212201154330190E商場(chǎng)420300400290310280F商場(chǎng)180310250490243298知識(shí)儲(chǔ)備1.初識(shí)堆疊條形圖

先定一個(gè)小目標(biāo)！了解堆疊條形圖的概念，能夠說出什么是堆疊條形圖知識(shí)儲(chǔ)備1.初識(shí)堆疊條形圖堆疊條形圖通常用于比較不同數(shù)據(jù)系列在同一類別上的占比和總量。堆疊條形圖沿著水平方向繪制，柱條的長度表示數(shù)據(jù)的大小，每個(gè)數(shù)據(jù)系列的柱條在同一類別上按照堆疊方式排列，相鄰系列的柱條堆疊在一起。簡(jiǎn)單的堆疊條形圖效果如下圖所示。設(shè)置方式：將系列的type屬性的值設(shè)置為bar并為每個(gè)系列設(shè)置相同的stack屬性值。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握柱狀圖標(biāo)注樣式的設(shè)置方法，能夠設(shè)置標(biāo)注信息2.柱狀圖的標(biāo)注樣式知識(shí)儲(chǔ)備為了吸引用戶的注意力，可以在圖表中添加標(biāo)注信息，如標(biāo)注的類型、大小、旋轉(zhuǎn)角度、文本和樣式等。設(shè)置方式：通過markPoint屬性可以設(shè)置圖表的標(biāo)注樣式。series:[{markPoint:{}}]markPoint屬性的值為markPoint對(duì)象，該對(duì)象的設(shè)置方式如下。2.柱狀圖的標(biāo)注樣式知識(shí)儲(chǔ)備markPoint對(duì)象的常用屬性如下表所示。2.柱狀圖的標(biāo)注樣式屬性說明symbol用于設(shè)置標(biāo)注的圖形，默認(rèn)值為pin，表示大頭針形symbolSize用于設(shè)置標(biāo)注的大小，默認(rèn)值為50symbolRotate用于設(shè)置標(biāo)注的旋轉(zhuǎn)角度，正值表示逆時(shí)針旋轉(zhuǎn)label用于設(shè)置標(biāo)注的文本itemStyle用于設(shè)置標(biāo)注的樣式emphasis用于設(shè)置標(biāo)注高亮狀態(tài)的配置blur用于設(shè)置標(biāo)注的淡出樣式data用于設(shè)置標(biāo)注的數(shù)據(jù)數(shù)組任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握堆疊條形圖的使用，能夠根據(jù)需求繪制堆疊條形圖任務(wù)實(shí)現(xiàn)定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2基于不同產(chǎn)品在不同商場(chǎng)的銷量繪制堆疊條形圖初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置堆疊條形圖的標(biāo)題、提示框、圖例、坐標(biāo)軸。設(shè)置圖表的數(shù)據(jù)。步驟5步驟3步驟4創(chuàng)建stackedStrip.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。任務(wù)實(shí)現(xiàn)瀏覽器中打開stackedStrip.html文件，不同產(chǎn)品在不同商場(chǎng)的銷量的堆疊條形圖效果如下圖所示。通過該堆疊條形圖可以直觀地看出各個(gè)產(chǎn)品在各個(gè)商場(chǎng)的銷量。常見的散點(diǎn)圖3.2繪制基礎(chǔ)散點(diǎn)圖【任務(wù)3.2.1】任務(wù)需求健身對(duì)我們的身體健康非常重要。為了更好地制訂合適的健身計(jì)劃，某健身房進(jìn)行了一項(xiàng)調(diào)查活動(dòng)，該調(diào)查活動(dòng)需要收集、分析顧客的身高和體重?cái)?shù)據(jù)，以了解他們的身體健康狀況和相關(guān)信息。將數(shù)據(jù)收集完成后，為了更加直觀地呈現(xiàn)數(shù)據(jù)，健身房想要以基礎(chǔ)散點(diǎn)圖的形式展示身高和體重?cái)?shù)據(jù)。本任務(wù)需要基于身高和體重?cái)?shù)據(jù)繪制基礎(chǔ)散點(diǎn)圖。身高和體重?cái)?shù)據(jù)如下表所示。身高（cm）體重（kg）15250.516052.3165541685516860169.560.817062172.660172.56217364.4任務(wù)需求身高（cm）體重（kg）173.563.217472.217465.6175.5641766517873.51807018475.51827218877知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)散點(diǎn)圖

先定一個(gè)小目標(biāo)！了解基礎(chǔ)散點(diǎn)圖的概念，能夠說出什么是基礎(chǔ)散點(diǎn)圖知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)散點(diǎn)圖相關(guān)性強(qiáng)度示意如下圖所示?；A(chǔ)散點(diǎn)圖是一種通過在二維坐標(biāo)系中將每個(gè)點(diǎn)表示為一個(gè)數(shù)據(jù)系列來展示數(shù)據(jù)的圖表類型。散點(diǎn)圖上數(shù)據(jù)點(diǎn)的分布情況，可以反映出變量間的相關(guān)性。如果變量之間不存在相互關(guān)系，散點(diǎn)圖上就會(huì)呈現(xiàn)出隨機(jī)分布的離散的點(diǎn)。如果存在某種相關(guān)性，那么大部分?jǐn)?shù)據(jù)點(diǎn)就會(huì)相對(duì)密集并以某種趨勢(shì)呈現(xiàn)。（a）中數(shù)據(jù)點(diǎn)相對(duì)密集并以上升趨勢(shì)呈現(xiàn)，相關(guān)性較強(qiáng)；（b）中數(shù)據(jù)點(diǎn)相對(duì)疏散，但整體以上升趨勢(shì)呈現(xiàn)，相關(guān)性較弱；（c）中的數(shù)據(jù)點(diǎn)隨機(jī)分布，沒有規(guī)律，不存在相關(guān)性。知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)散點(diǎn)圖數(shù)據(jù)的相關(guān)關(guān)系主要分為正相關(guān)、負(fù)相關(guān)、不相關(guān)、線性相關(guān)、指數(shù)相關(guān)、U形相關(guān)等。知識(shí)儲(chǔ)備1.初識(shí)基礎(chǔ)散點(diǎn)圖在ECharts中繪制基礎(chǔ)散點(diǎn)圖時(shí)，需要將系列的type屬性的值設(shè)置為scatter。series:[{type:'scatter'}]指定該系列圖表類型為基礎(chǔ)散點(diǎn)圖知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握坐標(biāo)軸組件中分隔線的使用方法，能夠設(shè)置x軸、y軸的分隔線2.坐標(biāo)軸組件的分隔線知識(shí)儲(chǔ)備2.坐標(biāo)軸組件的分隔線在實(shí)際開發(fā)中，有時(shí)需要設(shè)置坐標(biāo)軸在網(wǎng)格區(qū)域中的分隔線，以提高數(shù)據(jù)的可讀性。xAxis:{splitLine:{}},yAxis:{splitLine:{}}設(shè)置x軸在網(wǎng)格區(qū)域中的分隔線設(shè)置方式：通過設(shè)置坐標(biāo)軸組件的splitLine屬性，設(shè)置x軸、y軸在網(wǎng)格區(qū)域中的分隔線。設(shè)置y軸在網(wǎng)格區(qū)域中的分隔線知識(shí)儲(chǔ)備2.坐標(biāo)軸組件的分隔線splitLine對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示分隔線。默認(rèn)數(shù)值軸顯示，類目軸不顯示interval用于設(shè)置坐標(biāo)軸分隔線的顯示間隔，在類目軸中有效，默認(rèn)采用標(biāo)簽不重疊的策略間隔顯示標(biāo)簽lineStyle用于設(shè)置分隔線樣式，包括分隔線顏色、線寬、類型等知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握坐標(biāo)軸組件中不顯示零刻度的設(shè)置，能夠?qū)崿F(xiàn)x軸、y軸上零刻度的顯示與隱藏3.坐標(biāo)軸組件不顯示零刻度知識(shí)儲(chǔ)備3.坐標(biāo)軸組件不顯示零刻度在默認(rèn)情況下，坐標(biāo)軸中的零刻度會(huì)被顯示出來，設(shè)置scale屬性可以讓坐標(biāo)軸不顯示零刻度。xAxis:{type:'value',scale:true},yAxis:{type:'value',scale:true}設(shè)置方式：將坐標(biāo)軸組件的scale屬性的值設(shè)置為true，可以不顯示坐標(biāo)軸的零刻度。注意：scale屬性只在數(shù)值軸中有效，常用于雙數(shù)值軸的散點(diǎn)圖中。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握基礎(chǔ)散點(diǎn)圖的使用，能夠根據(jù)需求繪制基礎(chǔ)散點(diǎn)圖任務(wù)實(shí)現(xiàn)定義一個(gè)指定了寬度和高度的父容器?；谏砀吆腕w重?cái)?shù)據(jù)繪制基礎(chǔ)散點(diǎn)圖初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置散點(diǎn)圖的配置項(xiàng)和數(shù)據(jù)。創(chuàng)建scatter.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。步驟1步驟2步驟3步驟4任務(wù)實(shí)現(xiàn)瀏覽器中打開scatter.html文件，身高和體重?cái)?shù)據(jù)的基礎(chǔ)散點(diǎn)圖效果如下圖所示。通過該基礎(chǔ)散點(diǎn)圖可以直觀地看出身高與體重?cái)?shù)據(jù)大致呈現(xiàn)為一種正相關(guān)的關(guān)系，即身高越高，體重也相應(yīng)增加。繪制帶有漣漪動(dòng)畫的散點(diǎn)圖【任務(wù)3.2.2】任務(wù)需求在任務(wù)3.2.1中，通過基礎(chǔ)散點(diǎn)圖統(tǒng)計(jì)了顧客的身高和體重情況后，健身房的經(jīng)理小青想要在基礎(chǔ)散點(diǎn)圖上給最低點(diǎn)[152,50.5]和最高點(diǎn)[188,77]加一個(gè)漣漪動(dòng)畫效果，突出顯示這兩個(gè)點(diǎn)。本任務(wù)需要在任務(wù)3.2.1的基礎(chǔ)上，為最低點(diǎn)和最高點(diǎn)添加漣漪動(dòng)畫，完成帶有漣漪動(dòng)畫的散點(diǎn)圖的繪制。知識(shí)儲(chǔ)備1.初識(shí)帶有漣漪動(dòng)畫的散點(diǎn)圖

先定一個(gè)小目標(biāo)！了解帶有漣漪動(dòng)畫的散點(diǎn)圖的概念，能夠說出什么是帶有漣漪動(dòng)畫的散點(diǎn)圖知識(shí)儲(chǔ)備1.初識(shí)帶有漣漪動(dòng)畫的散點(diǎn)圖漣漪動(dòng)畫可以被理解為將一塊小石子扔在水里后，產(chǎn)生的一圈一圈向外擴(kuò)散的水波紋動(dòng)畫。知識(shí)儲(chǔ)備在ECharts中繪制帶有漣漪動(dòng)畫的散點(diǎn)圖時(shí)，需要將系列的type屬性的值設(shè)置為effectScatter。series:[{type:'effectScatter'}]指定該系列圖表類型為帶有漣漪動(dòng)畫的散點(diǎn)圖1.初識(shí)帶有漣漪動(dòng)畫的散點(diǎn)圖知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握漣漪動(dòng)畫的相關(guān)配置，能夠設(shè)置漣漪動(dòng)畫的大小、顏色、周期等2.漣漪動(dòng)畫的相關(guān)配置知識(shí)儲(chǔ)備2.漣漪動(dòng)畫的相關(guān)配置為了對(duì)某些數(shù)據(jù)進(jìn)行視覺突出顯示，可以在圖表中添加動(dòng)畫特效。series:[{rippleEffect:{}}]設(shè)置方式：通過系列的rippleEffect屬性可以設(shè)置漣漪動(dòng)畫的相關(guān)配置。知識(shí)儲(chǔ)備rippleEffect對(duì)象的常用屬性如下表所示。屬性說明color用于設(shè)置漣漪的顏色，默認(rèn)為散點(diǎn)的顏色number用于設(shè)置波紋的數(shù)量period用于設(shè)置動(dòng)畫的周期，表示時(shí)間，單位為秒scale用于設(shè)置動(dòng)畫中波紋的最大縮放比例brushType用于設(shè)置波紋的繪制方式2.漣漪動(dòng)畫的相關(guān)配置知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握漣漪動(dòng)畫顯示時(shí)機(jī)的設(shè)置，能夠控制漣漪動(dòng)畫何時(shí)開始顯示3.漣漪動(dòng)畫的顯示時(shí)機(jī)知識(shí)儲(chǔ)備3.漣漪動(dòng)畫的顯示時(shí)機(jī)設(shè)置方式：通過系列的showEffectOn屬性可以設(shè)置漣漪動(dòng)畫的顯示時(shí)機(jī)，控制漣漪動(dòng)畫何時(shí)開始。showEffectOn屬性常見的可選值如下。render（默認(rèn)值）：表示界面渲染完成后開始顯示漣漪動(dòng)畫。emphasis：表示鼠標(biāo)指針移入某個(gè)散點(diǎn)時(shí)，該散點(diǎn)開始顯示漣漪動(dòng)畫。知識(shí)儲(chǔ)備3.漣漪動(dòng)畫的顯示時(shí)機(jī)設(shè)置鼠標(biāo)指針移入某個(gè)散點(diǎn)時(shí)，散點(diǎn)顯示漣漪動(dòng)畫效果的示例代碼如下。series:[{type:'effectScatter',showEffectOn:'emphasis'}]任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握帶有漣漪動(dòng)畫的散點(diǎn)圖的使用，能夠根據(jù)需求繪制帶有漣漪動(dòng)畫的散點(diǎn)圖任務(wù)實(shí)現(xiàn)定義一個(gè)指定了寬度和高度的父容器。為最低點(diǎn)和最高點(diǎn)添加漣漪動(dòng)畫初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置帶有漣漪動(dòng)畫的散點(diǎn)圖的配置項(xiàng)和數(shù)據(jù)。創(chuàng)建effectScatter.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。步驟1步驟2步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開effectScatter.html文件，為最低點(diǎn)和最高點(diǎn)添加漣漪動(dòng)畫的效果如下圖所示。通過該基礎(chǔ)散點(diǎn)圖可以直觀地看出，成功為最低點(diǎn)和最高低點(diǎn)添加了漣漪動(dòng)畫效果。繪制氣泡圖【任務(wù)3.2.2】任務(wù)需求為慶祝線上店鋪成立8周年，某商家舉辦了為期一周的周年慶典活動(dòng)，旨在回饋新老顧客的