第3章柱狀圖和散點圖《ECharts數據可視化》學習目標/Target

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

類型等

掌握柱狀圖標線的使用方法，能夠設置最大值標線、最小值標線、平均值標線等熟悉柱條寬度和間距的設置方法，能夠總結柱條寬度、最大寬度、最小寬度、

間距的用法掌握圖形和標簽高亮樣式的設置方法，能夠設置圖形和標簽高亮樣式掌握柱條樣式的設置方法，能夠設置柱條的顏色、描邊線寬、描邊色、陰影、

不透明度等學習目標/Target

掌握柱狀圖文本標簽的使用方法，能夠設置文本標簽的顯示狀態、位置等

掌握柱狀圖標注樣式的使用方法，能夠設置標注信息掌握坐標軸組件中分隔線的使用方法，能夠設置x軸、y軸的分隔線掌握坐標軸組件中不顯示零刻度的設置，能夠實現x軸、y軸上零刻度的顯示與隱藏掌握漣漪動畫的相關配置，能夠設置漣漪動畫的大小、顏色、周期等學習目標/Target

掌握漣漪動畫顯示時機的設置，能夠控制漣漪動畫何時開始顯示

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

堆疊條形圖的繪制掌握常見散點圖的繪制，能夠完成基礎散點圖、帶有漣漪動畫的散點圖、

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

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

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

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

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

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

{

markLine:{}

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

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

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

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

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

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

第一根柱條的堆疊部分數值固定為0；

第二根柱條的堆疊部分數值為“總費用-支出1”的值，即600-110，結果為490；

第三根柱條的堆疊部分數值為“第二根柱條的堆疊部分數值-支出2”的值，即490-180，結果為310。以此類推。堆疊部分數值計算結果：vardata=[0,490,310,230,80,0];知識儲備

先定一個小目標！掌握柱條樣式的設置方法，能夠設置柱條的顏色、描邊線寬、描邊色、陰影、不透明度等2.柱條的樣式知識儲備2.柱條的樣式series:[{itemStyle:{}}]設置方式：通過itemStyle屬性可以設置柱條的樣式。柱條的樣式包括柱條的顏色、描邊線寬、描邊色、陰影、不透明度等。知識儲備2.柱條的樣式itemStyle屬性的值為itemStyle對象，itemStyle對象的常用屬性如下表所示。屬性說明color用于設置柱條的顏色boderColor用于設置柱條的描邊色，默認值為#000borderWidth用于設置柱條的描邊線寬，默認不描邊borderType用于設置柱條的描邊類型，可選值有solid（默認值）、dashed、dotted，分別表示實線、虛線、點線borderRadius用于設置柱條圓角的半徑opacity用于設置柱條的透明度，支持0~1的數字，為0時不繪制該圖形shadowBlur用于設置圖形陰影的模糊大小shadowColor用于設置陰影的顏色shadowOffsetX用于設置陰影水平方向上的偏移距離shadowOffsetY用于設置陰影垂直方向上的偏移距離知識儲備2.柱條的樣式設置柱條樣式的示例代碼如下。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對象中設置了柱條的一系列樣式。知識儲備

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

(10,10)點。其中，x軸的坐標值為10，y軸的坐標值為10。任務實現

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

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

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

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

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

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

先定一個小目標！掌握坐標軸組件中不顯示零刻度的設置，能夠實現x軸、y軸上零刻度的顯示與隱藏3.坐標軸組件不顯示零刻度知識儲備3.坐標軸組件不顯示零刻度在默認情況下，坐標軸中的零刻度會被顯示出來，設置scale屬性可以讓坐標軸不顯示零刻度。xAxis:{type:'value',scale:true},yAxis:{type:'value',scale:true}設置方式：將坐標軸組件的scale屬性的值設置為true，可以不顯示坐標軸的零刻度。注意：scale屬性只在數值軸中有效，常用于雙數值軸的散點圖中。任務實現

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

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

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

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

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