ECharts數(shù)據(jù)可視化課件 第5章 儀表盤、漏斗圖和折線樹圖

第5章儀表盤、漏斗圖和折線樹圖《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target

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

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

引導(dǎo)線學(xué)習(xí)目標(biāo)/Target

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

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

掌握常見漏斗圖的繪制，能夠完成標(biāo)準(zhǔn)漏斗圖和對比漏斗圖的繪制

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

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

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

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

先定一個小目標(biāo)！掌握儀表盤的指針的使用方法，能夠設(shè)置圖表指針pointer屬性的值為pointer對象，該對象的設(shè)置方式如下。series:[{pointer:{}}]知識儲備1.儀表盤指針儀表盤中提供了pointer屬性用于設(shè)置儀表盤指針的相關(guān)配置，例如，設(shè)置儀表盤指針的顯示與隱藏、指針長度、指針寬度、指針樣式等。知識儲備1.儀表盤指針pointer對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示指針，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示showAbove用于設(shè)置指針是否顯示在標(biāo)題和儀表盤詳情上方，默認(rèn)值為true，表示顯示在標(biāo)題和儀表盤詳情上方，設(shè)為false，表示顯示在標(biāo)題和儀表盤詳情下方icon用于設(shè)置指針標(biāo)記類型，支持的標(biāo)記類型包括circle、rect、roundRect、triangle、diamond、pin、arrow和none，表示的形狀分別為圓形、矩形、圓角矩形、三角形、菱形、大頭針形、箭頭形和無等。如果不想用這些形狀，還可以通過image://url的方式設(shè)置標(biāo)記類型為圖片，其中，url為圖片的鏈接或dataURI，或者可以通過path://的方式將其設(shè)置為任意的矢量路徑知識儲備1.儀表盤指針>>接上表屬性說明offsetCenter用于設(shè)置指針相對于儀表盤中心的偏移位置，數(shù)組第一項是水平方向的偏移，第二項是垂直方向的偏移?？梢允窍袼刂?，也可以是相對于儀表盤半徑的百分比length用于設(shè)置指針長度，可以是像素值，也可以是相對于半徑的百分比width用于設(shè)置指針寬度keepAspect用于設(shè)置指針是否在縮放時保持寬高比，默認(rèn)值為false，表示指針在縮放時寬高比可以自由改變，設(shè)為true，表示指針在縮放時會保持寬高比不變itemStyle用于設(shè)置指針樣式知識儲備1.儀表盤指針設(shè)置儀表盤指針樣式的示例代碼和效果圖如下。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.儀表盤指針固定點

先定一個小目標(biāo)！掌握儀表盤的指針固定點的使用方法，能夠設(shè)置指針固定點知識儲備2.儀表盤指針固定點設(shè)置方式：通過系列的anchor屬性可以對儀表盤指針固定點進(jìn)行設(shè)置。series:[{anchor:{}}]儀表盤指針固定點相關(guān)配置包括儀表盤指針固定點的顯示與隱藏、固定點大小、固定點樣式等。知識儲備2.儀表盤指針固定點anchor對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示固定點，默認(rèn)值為false，表示不顯示，設(shè)為true表示顯示showAbove用于設(shè)置固定點是否顯示在指針上方，默認(rèn)值為false，表示不顯示在指針上方，設(shè)為true表示顯示在指針上方size用于設(shè)置固定點大小，默認(rèn)值為6icon用于設(shè)置固定點標(biāo)記類型offsetCenter用于設(shè)置固定點相對于儀表盤中心的偏移位置，數(shù)組第一項是水平方向的偏移距離，第二項是垂直方向的偏移距離?？梢允窍袼刂担部梢允窍鄬τ趦x表盤半徑的百分比keepAspect用于設(shè)置固定點是否在縮放時保持寬高比，默認(rèn)值為false，表示固定點在縮放時寬高比可以自由改變，設(shè)為true，表示固定點在縮放時會保持寬高比不變itemStyle用于設(shè)置固定點的樣式知識儲備2.儀表盤指針固定點設(shè)置指針固定點樣式的示例代碼和效果圖如下。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.儀表盤刻度標(biāo)簽

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

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

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

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

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

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

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

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

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

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

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

}]

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