第5章儀表盤、漏斗圖和折線樹圖《ECharts數據可視化》學習目標/Target

掌握儀表盤的相關配置，能夠設置儀表盤的半徑、軸線、刻度、分隔線等掌握儀表盤的指針、指針固定點、刻度標簽的使用方法，能夠設置圖表指針、指針

固定點、刻度標簽等掌握漏斗圖樣式的設置方法，能夠設置漏斗圖的數據排列順序、漏斗圖每部分的間距、漏斗圖每部分的名稱等掌握漏斗圖的文本標簽和視覺引導線的使用方法，能夠設置圖表的文本標簽和視覺

引導線學習目標/Target

掌握折線樹圖的使用方法，能夠設置圖表數據的定義和樣式等

掌握常見儀表盤的繪制，能夠完成進度儀表盤和時鐘儀表盤的繪制

掌握常見漏斗圖的繪制，能夠完成標準漏斗圖和對比漏斗圖的繪制

掌握常見折線樹圖的繪制，能夠完成折線樹圖的繪制章節概述/Summary儀表盤、漏斗圖和折線樹圖都是常用的數據可視化圖表。儀表盤可以讓用戶在一張圖表上查看所關心的關鍵指標，并直觀地了解目標是否達成；漏斗圖則常用于展示一個過程或流程中每個關鍵步驟中的轉換率，以便發現流程中可能存在的問題；而折線樹圖用于展示某個總體數據中各個細分領域的表現趨勢和關系。本章詳細講解儀表盤、漏斗圖和折線樹圖的基本使用。目錄/Contents5.15.2常見的儀表盤常見的漏斗圖和折線樹圖常見的儀表盤5.1繪制進度儀表盤【任務5.1.1】任務需求某公司正在開發一款游戲App，曉月擔任項目經理，負責把控項目的整體開發進度。當項目的整體開發進度超過50%后，曉月匯總了每項任務的實際開發進度，并將其整理成表格的形式。曉月想以進度儀表盤的形式查看項目的實際開發進度，從而直觀地了解項目進展情況，并及時做出調整，以保證項目的順利完成。本任務需要基于項目實際進度繪制進度儀表盤。項目實際進度如下表所示。工作內容當前狀態每項任務的比重（%）每項任務的實際完成進度（%）需求調研已完成5100產品設計已完成20100UI設計已完成25100前后端開發正在進行2070測試未開始200上線未開始100任務需求知識儲備1.初識儀表盤

先定一個小目標！了解什么是儀表盤，能夠說出儀表盤的組成知識儲備1.初識儀表盤在ECharts中，一個簡單的儀表盤組成如下圖所示。知識儲備1.初識儀表盤儀表盤各組成部分介紹如下。刻度標簽：用于表示儀表盤的刻度數值。刻度線：用于表示儀表盤的刻度線。分隔線：用于分隔儀表盤的刻度線，增加儀表盤的可讀性和美觀度。標題：用于表示儀表盤的主要名稱和概要信息。詳情：用于表示儀表盤的詳細信息。軸線：用于顯示刻度線和標識數值范圍。指針：用于指示當前數值在儀表盤上的位置。指針固定點：用于表示指針的根部。在ECharts中繪制進度儀表盤時，需要將系列的type屬性設置為gauge。series:[{type:'gauge'}]指定該系列圖表類型為進度儀表盤1.初識儀表盤知識儲備知識儲備

先定一個小目標！掌握儀表盤的相關配置，能夠設置儀表盤的半徑、軸線、刻度、分隔線等2.儀表盤的相關配置知識儲備2.儀表盤的相關配置ECharts提供了一系列屬性用于配置儀表盤的樣式，設置儀表盤的常用屬性如下表所示。屬性說明radius用于設置儀表盤的半徑name用于設置系列名稱，用于tooltip的顯示，legend的圖例篩選，在setOption()方法中更新數據和配置項時用于指定對應的系列min用于設置最小的數據值，默認值為0max用于設置最大的數據值，默認值為100splitNumber用于設置儀表盤刻度的分割段數，默認值為10axisLine用于設置儀表盤軸線相關的配置axisTick用于設置儀表盤刻度樣式splitLine用于設置儀表盤分隔線樣式detail用于設置儀表盤詳情，用于顯示數據startAngle用于設置儀表盤起始角度，默認值為225，單位為度知識儲備2.儀表盤的相關配置>>接上表屬性說明endAngle用于設置儀表盤結束角度，默認值為-45，單位為度title用于設置儀表盤標題itemStyle用于設置儀表盤指針樣式data用于設置儀表盤的數據內容，該數據內容是一個數組，每個數組元素可以為單個數值、數組或對象clockwise用于設置儀表盤刻度是否是順時針增長，默認值為true，表示順時針增長animation用于設置是否開啟動畫，默認值為true，表示開啟動畫，設為false表示關閉動畫animationEasingUpdate用于設置數據更新動畫的緩動效果animationDurationUpdate用于設置數據更新動畫的時長，默認值為300，單位毫秒知識儲備（1）radius屬性radius屬性用于設置儀表盤的半徑，其值可以是相對于容器高寬中較小項的一半的百分比，也可以是像素值，默認值為75%。2.儀表盤的相關配置將儀表盤半徑設置為百分比，示例代碼如下。radius:'20%'radius:120將儀表盤半徑設置為像素值，示例代碼如下。知識儲備（2）axisLine屬性axisLine屬性用于設置儀表盤軸線相關的配置。例如，設置儀表盤軸線的顯示與隱藏、儀表盤兩端的形狀、儀表盤軸線的樣式等。2.儀表盤的相關配置axisLine屬性的值為axisLine對象，該對象的設置方式如下。series:{axisLine:{}}知識儲備2.儀表盤的相關配置儀表盤中axisLine對象的常用屬性如下表所示。屬性說明show用于設置是否顯示儀表盤軸線，默認值為true，表示顯示，設為false表示不顯示roundCap用于設置是否在兩端顯示成圓形，默認值為false，表示不顯示，設為true表示顯示lineStyle用于設置儀表盤軸線樣式，其值是一個對象類型的數據，包括軸線的顏色、寬度、類型等知識儲備2.儀表盤的相關配置lineStyle屬性的值為lineStyle對象，該對象的常用屬性如下表所示。屬性說明color用于設置軸線的顏色，默認值為#63677Awidth用于設置軸線的寬度opacity用于設置軸線的不透明度，默認值為1，取值范圍為[0,1]，為0時不繪制該圖形shadowBlur用于設置圖形陰影的模糊大小shadowColor用于設置陰影的顏色shadowOffsetX用于設置陰影水平方向上的偏移距離shadowOffsetY用于設置陰影垂直方向上的偏移距離知識儲備使用color屬性設置儀表盤不同區段的軸線的顏色，示例代碼如下。axisLine:{lineStyle:{color:[[0.1,'red'],[0.2,'green'],[0.3,'blue']]}}0.1表示第一段的結束位置為10%，顏色區間為0~10%，'red'表示顏色為紅色；0.2表示第二段的結束位置為20%，顏色區間為10%~20%，'green'表示顏色為綠色；0.3表示第三段的結束位置為30%，顏色區間為20%~30%，'blue'表示顏色為藍色。2.儀表盤的相關配置知識儲備（3）axisTick屬性axisTick屬性用于設置儀表盤刻度樣式，即短刻度線的樣式。例如，設置儀表盤刻度的顯示與隱藏、刻度的線長、刻度線與軸線的距離等。2.儀表盤的相關配置axisTick屬性的值為axisTick對象，該對象的設置方式如下。series:{axisTick:{}}知識儲備2.儀表盤的相關配置儀表盤中axisTick對象的常用屬性如下表所示。屬性說明show用于設置是否顯示刻度，默認值為true，表示顯示，設為false表示不顯示splitNumber用于設置分隔線之間分割的刻度數，默認值為5，單位個length用于設置刻度線長，默認值為6。支持相對半徑的百分比distance用于設置刻度線與軸線的距離，默認值為10lineStyle用于設置刻度線的樣式，包括刻度線的顏色、寬度、類型等知識儲備2.儀表盤的相關配置lineStyle屬性的值為lineStyle對象，該對象的常用屬性如下表所示。屬性說明color用于設置刻度線的顏色，默認值為#63677Awidth用于設置刻度線的寬度type用于設置刻度線的類型，可選值有solid（默認值）、dashed、dotted，分別表示實線、虛線、點線cap用于設置刻度線末端的繪制方式，可選值有butt、round、square，分別表示線段末端以方形結束、線段末端以圓形結束、線段末端以方形結束（會增加一個寬度和線段寬度相同、高度是線段厚度一半的矩形區域）join用于設置兩個長度不為0的相連部分的連接形狀，可選值有bevel（默認值）、round、miter，分別表示連接部分為三角形、扇形、菱形opacity用于設置刻度線的不透明度，默認值為1，取值范圍為[0,1]，為0時不繪制該圖形知識儲備2.儀表盤的相關配置設置儀表盤刻度樣式的示例代碼和效果圖如下。axisTick:{splitNumber:10,lineStyle:{color:'red',width:2}}知識儲備2.儀表盤的相關配置（4）splitLine屬性splitLine屬性用于設置儀表盤分隔線樣式，即長刻度線的樣式。例如，設置儀表盤分隔線的顯示與隱藏、分隔線的線長、分隔線與軸線的距離等。splitLine屬性的值為splitLine對象，儀表盤中splitLine對象的常用屬性如下表所示。屬性說明show用于設置是否顯示儀表盤分隔線，默認值為true，表示顯示，設為false表示不顯示length用于設置分隔線線長，默認值為10。支持相對半徑的百分比distance用于設置分隔線與軸線的距離，默認值為10lineStyle用于設置分隔線的樣式，包括分隔線的顏色、寬度、類型等知識儲備2.儀表盤的相關配置設置儀表盤分隔線樣式的示例代碼和效果圖如下。splitLine:{length:20,lineStyle:{color:'red',width:2}}知識儲備2.儀表盤的相關配置（5）detail屬性detail屬性用于設置儀表盤詳情。例如，設置儀表盤詳情的顯示與隱藏、文本顏色、文字字體的風格和大小等。detail屬性的值為detail對象，該對象的常用屬性如下表所示。屬性說明show用于設置是否顯示儀表盤詳情，默認值為true，表示顯示，設為false表示不顯示color用于設置文本顏色valueAnimation用于設置是否開啟標簽的數字動畫，默認值為true，表示開啟，設為false表示關閉知識儲備2.儀表盤的相關配置屬性說明offsetCenter用于設置中間值的位置，表示相對于儀表盤中心的偏移位置，數組第一項是水平方向的偏移距離，第二項是垂直方向的偏移距離。可以是像素值，也可以是相對于儀表盤半徑的百分比，默認值為[0,'40%']formatter用于設置儀表盤詳情的內容格式器fontSize用于設置文字的字體大小，默認值為30fontStyle用于設置文字字體的風格，可選值有normal（默認值）、italic、oblique，分別表示正常字體、斜體、傾斜lineHeight用于設置行高，默認值為30>>接上表知識儲備2.儀表盤的相關配置（6）itemStyle屬性itemStyle屬性用于設置儀表盤指針樣式，例如，設置指針的顏色、描邊線寬、描邊色、陰影、不透明度等。itemStyle屬性的值為itemStyle對象，該對象的設置方式如下。series:[{itemStyle:{}}]知識儲備2.儀表盤的相關配置itemStyle對象的常用屬性如下表所示。屬性說明color用于設置指針顏色boderColor用于設置指針的描邊色，默認值為#000borderWidth用于設置指針的描邊線寬，默認不描邊borderType用于設置指針的描邊類型，可選值有solid（默認值）、dashed、dotted，分別表示實線、虛線、點線borderDashOffset用于設置虛線的偏移量borderCap用于設置指針線段末端的繪制方式，可選值有butt（默認值）、round、square，分別表示線段末端以方形結束、線段未端以圓形結束、線段末端以方形結束（會增加一個寬度和線段寬度相同、高度是線段厚度一半的矩形區域）知識儲備2.儀表盤的相關配置>>接上表屬性說明borderJoin用于設置兩個長度不為0的相連部分的連接形狀，可選值有bevel（默認值）、round、miter，分別表示連接部分為三角形、扇形、菱形opacity用于設置指針的不透明度，支持從0~1的數字，為0時不繪制該圖形shadowBlur用于設置圖形陰影的模糊大小shadowColor用于設置陰影的顏色shadowOffsetX用于設置陰影水平方向上的偏移距離shadowOffsetY用于設置陰影垂直方向上的偏移距離知識儲備2.儀表盤的相關配置（7）data屬性data屬性用于設置儀表盤數據內容，例如，設置儀表盤標題、儀表盤詳情、數據項名稱、數據值和數據項的指針樣式等。data屬性的值為data對象，該對象的常用屬性如下表所示。屬性說明title用于設置儀表盤標題detail用于設置儀表盤詳情，用于顯示數據，可以設置數據的字體大小、風格、粗細、行高、背景色等name用于設置數據項名稱value用于設置數據值itemStyle用于設置數據項的指針樣式知識儲備2.儀表盤的相關配置設置儀表盤多個指針樣式的示例代碼如下。data:[{name:'進度1',title:{backgroundColor:'pink',width:60,height:40,color:'#fff',offsetCenter:['-20%','95%']},itemStyle:{color:'pink'},value:65,detail:{offsetCenter:['5%','-40%']},},{name:'進度2',value:2,title:{backgroundColor:'green',width:60,height:40,color:'#fff',offsetCenter:['30%','95%']},detail:{offsetCenter:['-30%','50%']},itemStyle:{color:'green'}}]知識儲備2.儀表盤的相關配置上頁代碼對應的儀表盤多指針樣式效果如下圖所示。任務實現

先定一個小目標！掌握進度儀表盤的使用，能夠根據需求繪制進度儀表盤任務實現創建D:\ECharts\chapter05目錄，并使用VSCode編輯器打開該目錄。放入echarts.js文件。創建gauge.html文件，在該文件中創建基礎HTML5文檔結構并引入echarts.js文件。定義一個指定寬度和高度的父容器。步驟1步驟2步驟3基于項目實際進度繪制進度儀表盤初始化ECharts實例對象，準備配置項，將配置項設置給ECharts實例對象。設置進度儀表盤的配置項和數據。步驟4步驟5步驟6任務實現在瀏覽器中打開gauge.html文件，項目實際進度的進度儀表盤效果如下圖所示。通過該進度儀表盤可以直觀地看出使用6種不同顏色的區塊表示每項任務，目前項目的實際開發進度處于藍色區域，實際開發進度是64%。繪制時鐘儀表盤【任務5.1.2】任務需求某公司組織了一場以“改變生活”為主題的Web前端應用創意挑戰賽。通過比賽引導參賽隊伍使用各類前端技術框架，圍繞日常的學習和生活設計、開發一款應用程序。在初賽階段，每個參賽隊伍需要選擇一名人員，以PPT的形式介紹他們的參賽作品。考慮到參賽隊伍眾多，為了避免浪費大家的時間，主辦方為每個參賽隊伍設定了介紹時間，參賽隊伍在各自的介紹時間之前來到現場即可。為了便于把控介紹時間，主辦方使用屏幕投影設備在中央大屏幕上顯示電子時鐘，用于提醒他們。本任務需要使用時鐘儀表盤完成電子時鐘效果。知識儲備1.儀表盤指針

先定一個小目標！掌握儀表盤的指針的使用方法，能夠設置圖表指針pointer屬性的值為pointer對象，該對象的設置方式如下。series:[{pointer:{}}]知識儲備1.儀表盤指針儀表盤中提供了pointer屬性用于設置儀表盤指針的相關配置，例如，設置儀表盤指針的顯示與隱藏、指針長度、指針寬度、指針樣式等。知識儲備1.儀表盤指針pointer對象的常用屬性如下表所示。屬性說明show用于設置是否顯示指針，默認值為true，表示顯示，設為false表示不顯示showAbove用于設置指針是否顯示在標題和儀表盤詳情上方，默認值為true，表示顯示在標題和儀表盤詳情上方，設為false，表示顯示在標題和儀表盤詳情下方icon用于設置指針標記類型，支持的標記類型包括circle、rect、roundRect、triangle、diamond、pin、arrow和none，表示的形狀分別為圓形、矩形、圓角矩形、三角形、菱形、大頭針形、箭頭形和無等。如果不想用這些形狀，還可以通過image://url的方式設置標記類型為圖片，其中，url為圖片的鏈接或dataURI，或者可以通過path://的方式將其設置為任意的矢量路徑知識儲備1.儀表盤指針>>接上表屬性說明offsetCenter用于設置指針相對于儀表盤中心的偏移位置，數組第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是像素值，也可以是相對于儀表盤半徑的百分比length用于設置指針長度，可以是像素值，也可以是相對于半徑的百分比width用于設置指針寬度keepAspect用于設置指針是否在縮放時保持寬高比，默認值為false，表示指針在縮放時寬高比可以自由改變，設為true，表示指針在縮放時會保持寬高比不變itemStyle用于設置指針樣式知識儲備1.儀表盤指針設置儀表盤指針樣式的示例代碼和效果圖如下。series:[{pointer:{width:12,length:'55%',offsetCenter:[0,'8%'],itemStyle:{color:'#C0911F',shadowColor:'rgba(0,0,0,0.3)',shadowBlur:8,shadowOffsetX:2,shadowOffsetY:4}}}]為指針添加了陰影效果，使得指針具有立體感。知識儲備2.儀表盤指針固定點

先定一個小目標！掌握儀表盤的指針固定點的使用方法，能夠設置指針固定點知識儲備2.儀表盤指針固定點設置方式：通過系列的anchor屬性可以對儀表盤指針固定點進行設置。series:[{anchor:{}}]儀表盤指針固定點相關配置包括儀表盤指針固定點的顯示與隱藏、固定點大小、固定點樣式等。知識儲備2.儀表盤指針固定點anchor對象的常用屬性如下表所示。屬性說明show用于設置是否顯示固定點，默認值為false，表示不顯示，設為true表示顯示showAbove用于設置固定點是否顯示在指針上方，默認值為false，表示不顯示在指針上方，設為true表示顯示在指針上方size用于設置固定點大小，默認值為6icon用于設置固定點標記類型offsetCenter用于設置固定點相對于儀表盤中心的偏移位置，數組第一項是水平方向的偏移距離，第二項是垂直方向的偏移距離。可以是像素值，也可以是相對于儀表盤半徑的百分比keepAspect用于設置固定點是否在縮放時保持寬高比，默認值為false，表示固定點在縮放時寬高比可以自由改變，設為true，表示固定點在縮放時會保持寬高比不變itemStyle用于設置固定點的樣式知識儲備2.儀表盤指針固定點設置指針固定點樣式的示例代碼和效果圖如下。series:[{anchor:{show:true,showAbove:true,itemStyle:{

color:'rgba(255,0,0,1)',shadowBlur:4,shadowColor:'rgba(130,12,12,1)',shadowOffsetX:2,shadowOffsetY:4}}}]知識儲備3.儀表盤刻度標簽

先定一個小目標！掌握儀表盤的刻度標簽的使用方法，能夠設置刻度標簽知識儲備儀表盤刻度標簽相關配置包括刻度標簽的顯示與隱藏、標簽與刻度線的距離、文字的顏色等。series:[{axisLabel:{}}]3.儀表盤刻度標簽設置方式：通過系列的axisLabel屬性可以設置儀表盤刻度標簽的樣式。知識儲備axisLabel對象的常用屬性如下表所示。屬性說明show用于設置是否顯示刻度標簽，默認值為true，表示顯示，設為false表示不顯示showAbove用于設置標簽與刻度線的距離，默認值為15color用于設置刻度標簽文字的顏色formatter用于設置刻度標簽的內容格式器fontStyle用于設置文字字體的風格，可選值有normal（默認值）、italic、oblique，分別表示正常字體、斜體、傾斜fontWeight用于設置文字字體的粗細fontSize用于設置文字的字體大小3.儀表盤刻度標簽知識儲備設置儀表盤刻度標簽的示例代碼和效果圖如下。series:[{axisLabel:{fontSize:30,distance:25,formatter:function(value){if(value===0){return'';}returnvalue+'';}}}]不顯示數值0，標簽與刻度線的距離增大了，刻度標簽顯示的字體變大了。3.儀表盤刻度標簽任務實現

先定一個小目標！掌握時鐘儀表盤的使用，能夠根據需求繪制時鐘儀表盤任務實現創建clock.html文件，在該文件中創建基礎HTML5文檔結構并引入echarts.js文件。定義一個指定寬度和高度的父容器。步驟1步驟2步驟3繪制電子時鐘初始化ECharts實例對象，準備配置項，將配置項設置給ECharts實例對象。設置標記類型為矢量圖。設置時鐘儀表盤的配置項，定義時針、分針和秒針3個系列。設置時針系列、分針系列和秒針系列的配置項和數據，實現時針、分針和秒針效果。步驟4步驟7步驟5步驟6根據系統時間計算出時針、分針和秒針顯示的數值，并設置定時器。任務實現在瀏覽器中運行clock.html文件，電子時鐘效果如下圖所示。常見的漏斗圖和折線樹圖5.2繪制基礎漏斗圖【任務5.2.1】任務需求在顧客線上購物時，商家可以通過觀察商品從被瀏覽到被下單的整個過程來了解購物流程中各個環節的轉化率，以便找出轉化率較低的環節，從而進行優化和改進，提高整個購物流程的轉化率。例如，某電商平臺想要以基礎漏斗圖的形式展示從“瀏覽網站”到“完成交易”整個購物流程中的轉化數據，以直觀展示線上購物流程中各個環節的轉化率。本任務需要基于購物流程中各個環節的轉化率繪制基礎漏斗圖。購物流程中各個環節的轉化率如下表所示。環節人數（人）轉化率（%）瀏覽網站1000100放入購物車88088生成訂單60060支付訂單40040完成交易25025任務需求知識儲備

先定一個小目標！了解什么是漏斗圖，能夠說出漏斗圖的組成1.初識基礎漏斗圖知識儲備1.初識基礎漏斗圖在ECharts中，一個簡單的漏斗圖主要由漏斗的顏色、形狀、大小和位置等漏斗本身的圖形元素，以及文本標簽和視覺引導線等輔助元素構成，如下圖所示。知識儲備1.初識基礎漏斗圖在ECharts中繪制基礎漏斗圖時，需要將系列的type屬性的值設置為funnel。series:[{type:'funnel'}]指定該系列圖表類型為基礎漏斗圖知識儲備

先定一個小目標！掌握漏斗圖樣式的設置方法，能夠設置漏斗圖的數據排列順序、漏斗圖每部分的間距、漏斗圖每部分的名稱等2.漏斗圖的樣式知識儲備ECharts中提供了一系列屬性用于設置漏斗圖的樣式，例如，漏斗圖的數據排列順序、漏斗圖每部分之間的間距、漏斗圖的樣式等。漏斗圖的常用屬性如下表所示。屬性說明name用于設置系列名稱，即漏斗圖的名稱orient用于設置漏斗圖的朝向，可選值有vertical（默認值）、horizontal，分別表示縱向和橫向min用于設置最小的數據值，默認值為0max用于設置最大的數據值，默認值為100left用于設置漏斗圖組件離容器左側的距離，默認值為802.漏斗圖的樣式知識儲備屬性說明right用于設置漏斗圖組件離容器右側的距離，默認值為80top用于設置漏斗圖組件離容器上側的距離，默認值為60bottom用于設置漏斗圖組件離容器下側的距離，默認值為60width用于設置漏斗圖組件的寬度。默認值為auto，表示自適應height用于設置漏斗圖組件的高度。默認值為auto，表示自適應minSize用于設置最小數據值映射的寬度，默認值為0%maxSize用于設置最大數據值映射的寬度，默認值為100%>>接上表2.漏斗圖的樣式知識儲備屬性說明sort用于設置漏斗圖數據排列順序，可選值有descending（默認值）、ascending、none，分別表示降序排列、升序排列、按data順序排列gap用于設置漏斗圖每部分的間距legendHoverLink用于設置是否啟用圖例hover時的聯動高亮，默認值為true，表示啟用funnelAlign用于設置水平方向對齊布局類型，默認值為center，表示居中對齊itemStyle用于設置漏斗圖的樣式emphasis用于設置漏斗圖中圖形和標簽高亮的樣式，如在鼠標移入或者圖例聯動時高亮data用于設置系列中的數據內容數組，每個數組元素可以為單個數值、數組或對象>>接上表2.漏斗圖的樣式知識儲備2.漏斗圖的樣式設置漏斗圖的底座形狀不為尖端三角圖形的示例代碼和效果圖如下。minSize:'37%'知識儲備

先定一個小目標！掌握漏斗圖的文本標簽和視覺引導線的使用方法，能夠設置圖表的文本標簽和視覺引導線3.漏斗圖的文本標簽樣式知識儲備3.漏斗圖的文本標簽樣式通過漏斗圖的文本標簽可以顯示圖形的一些數據信息，如值、名稱等。label屬性的值為label對象，該對象的常用屬性如下表所示。屬性說明show用于設置是否顯示漏斗圖的文本標簽，默認值為ture，表示顯示，設為false表示不顯示Position用于設置漏斗圖文本標簽的位置formatter用于設置漏斗圖文本標簽的內容格式器Color用于設置文字的顏色fontStyle用于設置文字字體的風格，可選值有normal（默認值）、italic、oblique 設置方式：通過系列的label屬性可以設置漏斗圖的文本標簽樣式。知識儲備3.漏斗圖的文本標簽樣式>>接上表屬性說明fontSize用于設置文字的字體大小fontWeight用于設置文字字體的粗細，可選值有normal（默認值）、bold、bolder、lighter，也可以設置為具體的數值知識儲備3.漏斗圖的文本標簽樣式position屬性的可選值如下。outside：用于設置每部分文本標簽名稱顯示在漏斗圖梯形外部，為默認值。left：用于設置每部分文本標簽名稱顯示在漏斗圖左側，orient屬性的值為vertical時有效。right：用于設置每部分文本標簽名稱顯示在漏斗圖右側，orient屬性的值為vertical時有效。top：用于設置每部分文本標簽名稱顯示在漏斗圖上側，orient屬性的值為horizontal時有效。bottom：用于設置每部分文本標簽名稱顯示在漏斗圖下側，orient屬性的值為horizontal時有效。inside：用于設置每部分文本標簽名稱顯示在漏斗圖梯形內部。insideRight：用于設置每部分文本標簽名稱顯示在漏斗圖梯形內部右側。insideLeft：用于設置每部分文本標簽名稱顯示在漏斗圖梯形內部左側。leftTop：用于設置每部分文本標簽名稱顯示在漏斗圖左側上部。leftBottom：用于設置每部分文本標簽名稱顯示在漏斗圖左側下部。rightTop：用于設置每部分文本標簽名稱顯示在漏斗圖右側上部。rightBottom：用于設置每部分文本標簽名稱顯示在漏斗圖右側下部。知識儲備3.漏斗圖的文本標簽樣式設置漏斗圖文本標簽樣式的示例代碼和效果圖如下。series:[{label:{position:'inside',fontStyle:'italic',fontWeight:500,fontSize:20}}]任務實現

先定一個小目標！掌握基礎漏斗圖的使用，能夠根據需求繪制基礎漏斗圖任務實現定義一個指定了寬度和高度的父容器。基于購物流程中各個環節的轉化率繪制基礎漏斗圖初始化ECharts實例對象，準備配置項，將配置項設置給ECharts實例對象。設置基礎漏斗圖的配置項和數據。創建funnel.html文件，在該文件中創建基礎HTML5文檔結構并引入echarts.js文件。步驟1步驟2步驟3步驟4任務實現在瀏覽器中打開funnel.html文件，購物流程中各個環節的轉化率的基礎漏斗圖效果如下圖所示。通過該基礎漏斗圖可以直觀地看出從“瀏覽網站”到“完成交易”的各個環節的轉化率。任務實現當鼠標指針移入“放入購物車”環節時的漏斗圖效果如下圖所示。當鼠標指針移入“放入購物車”環節時，會通過提示框顯示當前環節的轉化率。繪制對比漏斗圖【任務5.2.2】任務需求在國慶節來臨之際，某電商平臺策劃了一系列優惠活動，運營員小蘭預估了購物流程各個環節的轉化率。活動結束后，小蘭結合實際數據，對客戶在整個線上購物流程中的各個環節進行了實際轉化率統計。為了更好地分析各個環節存在的問題，小蘭想要以對比漏斗圖的形式展示預期轉化率和實際轉化率的差異，幫助運營人員更好地了解客戶的購物行為，進一步優化策略，提高轉化率和客戶滿意度。本任務需要基于購物流程中各個環節的預期與實際轉化率繪制對比漏斗圖。任務需求購物流程中各個環節的預期與實際轉化率如下表所示。環節人數（人）預期轉化率（%）實際轉化率（%）瀏覽網站100010080放入購物車8808850生成訂單6006030支付訂單4004010完成交易250255知識儲備1.初識對比漏斗圖

先定一個小目標！了解對比漏斗圖的概念，能夠說出什么是對比漏斗圖知識儲備對比漏斗圖是一種展示兩個流程、過程、事件等在數量和比例上的差異的圖表，通常用于對比兩組數據在不同階段的變化趨勢，例如預期和實際轉化率的比較。通過對比漏斗圖的形式，可以更加清晰、直觀地顯示預期目標和實際結果之間的差異和變化趨勢。1.初識對比漏斗圖知識儲備1.初識對比漏斗圖對比漏斗圖的效果如下圖所示。每部分圖形上的淺色部分表示當前環節預期的轉化率，中間深色部分表示當前環節實際的轉化率，通過預期與實際轉化率的對比可以看出數據的變化。知識儲備2.漏斗圖文本標簽的視覺引導線

先定一個小目標！掌握漏斗圖的文本標簽和視覺引導線的使用方法，能夠設置圖表的文本標簽和視覺引導線知識儲備視覺引導線相關配置包括設置視覺引導線的顯示與隱藏、長度、樣式等。設置方式：通過系列的labelLine屬性可以設置漏斗圖文本標簽的視覺引導線。2.漏斗圖文本標簽的視覺引導線labelLine屬性的值是labelLine對象，該對象的常用屬性如下表所示。屬性說明show用于設置是否顯示視覺引導線，默認值為true，表示顯示，設為false表示不顯示length用于設置視覺引導線的長度lineStyle用于設置視覺引導線的樣式知識儲備2.漏斗圖文本標簽的視覺引導線設置漏斗圖文本標簽視覺引導線的示例代碼和效果圖如下。series:[{label:{position:'right'},labelLine:{length:20,lineStyle:{color:'red',width:2}}}]任務實現

先定一個小目標！掌握對比漏斗圖的使用，能夠根據需求繪制對比漏斗圖任務實現定義一個指定了寬度和高度的父容器。基于購物流程中各個環節的預期與實際轉化率繪制對比漏斗圖初始化ECharts實例對象，準備配置項，將配置項設置給ECharts實例對象。設置對比漏斗圖的配置項，定義預期轉化率和實際轉化率這兩個系列。創建multiFunnel.html文件，在該文件中創建基礎HTML5文檔結構并引入echarts.js文件。步驟1步驟2步驟3步驟4設置預期轉化率系列的配置項和數據。設置實際轉化率系列的配置項和數據。步驟5步驟6任務實現在瀏覽器中打開multiFunnel.html文件，購物流程中各個環節的預期與實際轉化率的對比漏斗圖如下圖所示。在該對比漏斗圖中，深色部分表示實際轉化率，淺色部分表示預期轉化率。從圖中可以看出，每個環節的預期轉化率高于實際轉化率。讀者可以嘗試將鼠標指針移入漏斗圖的某部分，查看其實際轉化率與預期轉化率的具體數據。繪制折線樹圖【任務5.2.3】任務需求小松是某汽車銷售服務4S店的總經理，他率領人力資源部初步決定了公司的組織結構，并組織了高層研討。隨后，經過高管團隊的多次修改和完善，最終確定了公司的組織結構。為了更好地呈現數據，小松想要以折線樹圖的形式展示公司組織結構。本任務需要基于公司組織結構繪制折線樹圖。任務需求公司組織結構如下表所示。職位上級下級總經理無職能總監服務總監市場總監職能總監總經理人力資源部行政部財務部服務總監總經理技術部客服部售后部市場總監總經理企劃部推廣部廣告部知識儲備1.初識折線樹圖

先定一個小目標！了解折線樹圖的概念，能夠說出什么是折線樹圖知識儲備樹圖是信息可視化領域常用的一種圖表類型，它可以用來展示層次結構數據，如產品銷售額等。折線樹圖是將折線圖和樹圖結合的一種圖表類型。在折線樹圖中，每個節點都有一條與之對應的折線，這些折線連接在一起形成了樹狀結構。每個節點對應的折線表示該節點對應的數值隨著層次的變化而變化的情況，而節點的大小和顏色可以用來顯示數據的大小和分布。1.初識折線樹圖知識儲備使用折線樹圖展示支出明細，折線樹圖的效果如下圖所示。1.初識折線樹圖知識儲備在ECharts中繪制折線樹圖時，需要將系列的type屬性的值設置為tree。series:[{type:'tree',edgeShape:'polyline'}]指定該系列圖表類型為樹圖1.初識折線樹圖指定該樹圖中連線的形狀為折線知識儲備

先定一個小目標！掌握折線樹圖的使用方法，能夠設置圖表數據的定義和樣式等2.折線樹圖的實現知識儲備2.折線樹圖的實現（1）數據定義折線樹圖使用系列的data屬性指定圖表的內容。折線樹圖中data屬性的值為data對象，該對象的常用屬性如下表所示。一個折線樹圖的實現通常分為數據定義和折線樹圖樣式設置這兩部分。屬性說明name用于設置子節點或根節點的名稱，用來標識每一個節點children用于設置子節點，其格式同data屬性的一致collapsed用于設置節點初始化是否折疊value用于設置節點的值，在tooltip屬性中顯示itemStyle用于設置節點的樣式知識儲備2.折線樹圖的實現>>接上表屬性說明lineStyle用于設置節點對應的連線的樣式label用于設置節點對應的文本標簽emphasis用于設置節點的高亮狀態blur用于設置節點淡出狀態select用于設置節點選中狀態tooltip用于設置本系列每個數據項中特定的提示框組件知識儲備2.折線樹圖的實現設置折線樹圖中所需數據的示例代碼如下。vardata1=[{name:'parent',children:[{name:'child1',children:[{name:'grandchild1'},{name:'grandchild2'},{name:'grandchild3'}]},{name:'child2',children:[{name:'grandchild1'},{name:'grandchild2'},{name:'grandchild3'}]

}]

}];知識儲備2.折線樹圖的實現（2）折線樹圖樣式設置ECharts提供了一系列屬性用于設置折線樹圖的樣式。例如，設置折線樹圖布局的方向、節點標記的圖形、節點標記的大小、節點的樣式等。折線樹圖的節點分為葉子節點和非葉子節點，介紹如下。葉子節點：一棵樹當中沒有分叉出子節點的節點。非葉子節點：一棵樹當中分叉出子節點的節點。設置葉子節點的樣式：通過leaves屬性進行配置。知識儲備2.折線樹圖的實現折線樹圖的常用屬性如下表所示。屬性說明name用于設置系列名稱，即樹圖每個