ECharts數(shù)據(jù)可視化課件 第4章 雷達(dá)圖、旭日圖和關(guān)系圖

第4章雷達(dá)圖、旭日圖和關(guān)系圖《ECharts數(shù)據(jù)可視化》學(xué)習(xí)目標(biāo)/Target掌握雷達(dá)圖坐標(biāo)系組件的使用方法，能夠設(shè)置雷達(dá)圖坐標(biāo)系掌握雷達(dá)圖指示器名稱、坐標(biāo)軸軸線、坐標(biāo)軸分隔線的設(shè)置方法，能夠設(shè)置雷達(dá)

圖中的指示器名稱、坐標(biāo)軸軸線、坐標(biāo)軸分隔線熟悉單擊旭日圖節(jié)點后的行為，能夠總結(jié)單擊旭日圖節(jié)點后的行為掌握旭日圖數(shù)據(jù)的使用方法，能夠設(shè)置旭日圖中所需的數(shù)據(jù)學(xué)習(xí)目標(biāo)/Target掌握旭日圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等熟悉旭日圖半徑的設(shè)置方法，能夠總結(jié)旭日圖半徑的正確使用方法掌握旭日圖扇形塊樣式的設(shè)置方法，能夠設(shè)置旭日圖中扇形塊的樣式掌握旭日圖的多層樣式的設(shè)置方法，能夠設(shè)置不同層的樣式學(xué)習(xí)目標(biāo)/Target掌握關(guān)系圖數(shù)據(jù)的使用方法，能夠設(shè)置關(guān)系圖中所需的數(shù)據(jù)掌握關(guān)系圖節(jié)點標(biāo)記大小的設(shè)置方法，能夠設(shè)置節(jié)點標(biāo)記大小掌握關(guān)系圖節(jié)點間關(guān)系數(shù)據(jù)的使用方法，能夠設(shè)置節(jié)點間的關(guān)系數(shù)據(jù)掌握關(guān)系圖邊兩端標(biāo)記的使用方法，能夠設(shè)置關(guān)系圖邊兩端標(biāo)記學(xué)習(xí)目標(biāo)/Target掌握關(guān)系圖邊的標(biāo)簽的使用方法，能夠設(shè)置邊的標(biāo)簽掌握雷達(dá)圖的繪制，能夠完成基礎(chǔ)雷達(dá)圖和自定義雷達(dá)圖的繪制

掌握旭日圖的繪制，能夠完成旭日圖和圓角旭日圖的繪制掌握關(guān)系圖的繪制，能夠完成關(guān)系圖的繪制章節(jié)概述/Summary在日常生活中，對于一些復(fù)雜的數(shù)據(jù)，使用雷達(dá)圖、旭日圖、關(guān)系圖等圖表可以更加簡單、直觀地傳達(dá)信息，讓用戶更容易理解和記憶信息。本章將對雷達(dá)圖、旭日圖和關(guān)系圖進(jìn)行詳細(xì)講解。目錄/Contents4.14.2常見的雷達(dá)圖常見的旭日圖和關(guān)系圖常見的雷達(dá)圖4.1繪制基礎(chǔ)雷達(dá)圖【任務(wù)4.1.1】任務(wù)需求某學(xué)校開展了一系列“查漏補缺”的活動，通過不定期進(jìn)行考核和分析，旨在找出學(xué)生在哪些科目上比較薄弱，進(jìn)一步找差距、補短板、明方向、再發(fā)力。蘇校長希望繪制一張基礎(chǔ)雷達(dá)圖來展示該校三個年級部分學(xué)科的平均成績之間的差距，從而幫助教師和學(xué)生更好地了解目前的學(xué)科成績情況，并進(jìn)一步提高學(xué)生的學(xué)習(xí)成績。本任務(wù)需要基于該校三個年級部分學(xué)科的平均成績繪制基礎(chǔ)雷達(dá)圖。該校三個年級部分學(xué)科的平均成績（單位：分）如下表所示。年級語文數(shù)學(xué)英語政治歷史地理高一907685728570高二759680797081高三808472867989任務(wù)需求知識儲備1.初識基礎(chǔ)雷達(dá)圖

先定一個小目標(biāo)！了解基礎(chǔ)雷達(dá)圖的概念，能夠說出什么是基礎(chǔ)雷達(dá)圖知識儲備1.初識基礎(chǔ)雷達(dá)圖基礎(chǔ)雷達(dá)圖以一個中心點為起點，從中心點向外延伸出多條射線，每條射線代表一個特定的變量或指標(biāo)。每條射線上的點或線段表示該變量在不同維度上的取值或得分。知識儲備雷達(dá)圖常用的場景如下。多維數(shù)據(jù)比較：如果數(shù)據(jù)包含多個維度信息，那么雷達(dá)圖可以用來比較不同維度上的數(shù)據(jù)情況，幫助決策者快速發(fā)現(xiàn)數(shù)據(jù)中的規(guī)律和潛在問題。維度排名分析：對數(shù)據(jù)中的每個維度，都可以進(jìn)行排名，從而判斷數(shù)據(jù)的可行性和數(shù)據(jù)質(zhì)量。1.初識基礎(chǔ)雷達(dá)圖知識儲備在ECharts中繪制基礎(chǔ)雷達(dá)圖時，需要將系列的type屬性的值設(shè)置為radar，示例代碼如下。series:[{

type:'radar'}]1.初識基礎(chǔ)雷達(dá)圖知識儲備雷達(dá)圖的效果如下圖所示。1.初識基礎(chǔ)雷達(dá)圖知識儲備2.雷達(dá)圖坐標(biāo)系組件

先定一個小目標(biāo)！掌握雷達(dá)圖坐標(biāo)系組件的使用方法，能夠設(shè)置雷達(dá)圖坐標(biāo)系知識儲備在ECharts中，通過雷達(dá)圖坐標(biāo)系組件可以創(chuàng)建雷達(dá)圖坐標(biāo)系。雷達(dá)圖坐標(biāo)系沒有x軸和y軸，但是每一條軸都代表一個單獨的維度。雷達(dá)圖坐標(biāo)系組件的效果如下圖所示。2.雷達(dá)圖坐標(biāo)系組件知識儲備通過option對象的radar屬性可以配置雷達(dá)圖坐標(biāo)系組件，radar屬性的值為radar對象，該對象的設(shè)置方式如下。varoption={

radar:{}};2.雷達(dá)圖坐標(biāo)系組件知識儲備radar對象的常用屬性如下表所示。屬性說明center用于設(shè)置雷達(dá)圖的中心坐標(biāo)radius用于設(shè)置雷達(dá)圖的半徑，默認(rèn)值為75%startAngle用于設(shè)置坐標(biāo)的系起始角度，即第一條指示器軸的角度，默認(rèn)值為90indicator用于設(shè)置雷達(dá)圖的指示器2.雷達(dá)圖坐標(biāo)系組件知識儲備>>接上表屬性說明splitArea用于設(shè)置雷達(dá)圖坐標(biāo)軸在繪圖區(qū)域中的分隔區(qū)域nameGap用于設(shè)置指示器名稱和指示器軸的距離，默認(rèn)值為15splitNumber用于設(shè)置指示器軸的分割段數(shù)，默認(rèn)值為5shape用于設(shè)置雷達(dá)圖繪制類型，可選值為polygon（默認(rèn)值）、circle，分別表示多邊形、圓形2.雷達(dá)圖坐標(biāo)系組件知識儲備（1）center屬性center屬性用于設(shè)置雷達(dá)圖的中心坐標(biāo)，坐標(biāo)以數(shù)組的形式表示，默認(rèn)值為['50%','50%']。數(shù)組的第一項是橫坐標(biāo)，第二項是縱坐標(biāo)，數(shù)組元素可以被設(shè)置成像素值或百分比字符串。將雷達(dá)圖的中心坐標(biāo)設(shè)置為像素值，示例代碼如下。2.雷達(dá)圖坐標(biāo)系組件center:[400,200]第一項表示雷達(dá)圖中心坐標(biāo)的橫坐標(biāo)為400像素，第二項表示雷達(dá)圖中心坐標(biāo)的縱坐標(biāo)為200像素知識儲備將雷達(dá)圖的中心坐標(biāo)設(shè)置為百分比字符串，示例代碼如下。2.雷達(dá)圖坐標(biāo)系組件center:['50%','50%']第一項表示雷達(dá)圖中心坐標(biāo)的橫坐標(biāo)為容器寬度50%的位置，第二項表示雷達(dá)圖中心坐標(biāo)的縱坐標(biāo)為容器高度50%的位置知識儲備（2）indicator屬性indicator屬性用于設(shè)置雷達(dá)圖的指示器，該屬性的值為indicator對象，該對象的常用屬性如下表所示。屬性說明name用于設(shè)置指示器的名稱max用于設(shè)置指示器的最大值，默認(rèn)值為100min用于設(shè)置指示器的最小值，默認(rèn)值為0color用于設(shè)置標(biāo)簽特定的顏色2.雷達(dá)圖坐標(biāo)系組件知識儲備設(shè)置雷達(dá)圖的指示器的示例代碼如下。radar:{indicator:[{name:'抗壓力',max:100},{name:'溝通力',max:90},]}2.雷達(dá)圖坐標(biāo)系組件知識儲備（3）splitArea屬性splitArea屬性用于設(shè)置雷達(dá)圖坐標(biāo)軸在繪圖區(qū)域中的分隔區(qū)域，該屬性的值為splitArea對象，該對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示分隔區(qū)域，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示areaStyle用于設(shè)置分隔區(qū)域的樣式2.雷達(dá)圖坐標(biāo)系組件知識儲備areaStyle屬性的值為areaStyle對象，該對象的常用屬性如下。color：用于設(shè)置分隔區(qū)域的顏色，color屬性值為數(shù)組類型，分隔區(qū)域會按數(shù)組中顏色的順序依次循環(huán)設(shè)置顏色。默認(rèn)值為['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']。shadowBlur：用于設(shè)置圖形陰影的模糊大小，其值為數(shù)字類型，默認(rèn)值為0。shadowColor：用于設(shè)置陰影顏色，可以使用RGB表示顏色，例如'rgb(128,128,128)'；如果想要加上alpha通道表示不透明度，可以使用RGBA，例如'rgba(128,128,128,0.5)'；也可以使用十六進(jìn)制格式表示顏色，例如'#ccc'。shadowOffsetX：用于設(shè)置陰影水平方向上的偏移距離，默認(rèn)值為0。shadowOffsetY：用于設(shè)置陰影垂直方向上的偏移距離，默認(rèn)值為0。opacity：用于設(shè)置圖形的不透明度，支持從0到1的數(shù)字，為0時不繪制該圖形，默認(rèn)值為1。2.雷達(dá)圖坐標(biāo)系組件知識儲備設(shè)置雷達(dá)圖分隔區(qū)域的樣式的示例代碼如下。radar:{splitArea:{show:true,areaStyle:{color:['#FFF0F5','#F0FFFF'],shadowBlur:20,shadowColor:'#FF3030',shadowOffsetX:10,

shadowOffsetY:20,opacity:1}}}2.雷達(dá)圖坐標(biāo)系組件任務(wù)實現(xiàn)

先定一個小目標(biāo)！掌握基礎(chǔ)雷達(dá)圖的使用，能夠根據(jù)需求繪制基礎(chǔ)雷達(dá)圖任務(wù)實現(xiàn)創(chuàng)建D:\ECharts\chapter04目錄，并使用VSCode編輯器打開該目錄。放入echarts.js文件。創(chuàng)建radar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2步驟3基于三個年級部分學(xué)科平均成績繪制雷達(dá)圖初始化ECharts實例對象，準(zhǔn)備配置項，將配置項設(shè)置給ECharts實例對象。設(shè)置雷達(dá)圖的配置項和數(shù)據(jù)。步驟4步驟5步驟6任務(wù)實現(xiàn)在瀏覽器中打開radar.html文件，該校三個年級部分學(xué)科的平均成績的雷達(dá)圖效果如下圖所示。繪制自定義雷達(dá)圖【任務(wù)4.1.2】任務(wù)需求在新的一年里，某公司需要棉花等原材料來生產(chǎn)棉被。方總監(jiān)從多個維度對不同的供應(yīng)商按百分制進(jìn)行了評分，并對數(shù)據(jù)進(jìn)行整理。他希望繪制一張自定義雷達(dá)圖來更好地展示多個供應(yīng)商不同維度的對比情況，從而選擇合適的供應(yīng)商。本任務(wù)需要基于多個供應(yīng)商不同維度的對比繪制自定義雷達(dá)圖。多個供應(yīng)商的不同維度對比（單位：分）如下表所示。供應(yīng)商企業(yè)信譽財務(wù)過往供應(yīng)狀況產(chǎn)能產(chǎn)品質(zhì)量距離供應(yīng)商A906080558560供應(yīng)商B858590809081供應(yīng)商C807060906089任務(wù)需求知識儲備1.雷達(dá)圖指示器名稱

先定一個小目標(biāo)！掌握雷達(dá)圖指示器名稱的使用方法，能夠設(shè)置雷達(dá)圖中的指示器名稱知識儲備在ECharts中，可以通過radar對象的axisName屬性對雷達(dá)圖指示器名稱進(jìn)行設(shè)置。axisName屬性的值為axisName對象，該對象的設(shè)置方式如下。radar:{axisName:{}}1.雷達(dá)圖指示器名稱知識儲備axisName對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示指示器名稱，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示formatter用于設(shè)置指示器名稱顯示的格式color用于設(shè)置文字的顏色，默認(rèn)值為#333fontSize用于設(shè)置文字的字體大小，默認(rèn)值為121.雷達(dá)圖指示器名稱知識儲備formatter屬性的可選值支持字符串模板和回調(diào)函數(shù)，下面分別進(jìn)行講解。①使用字符串模板設(shè)置指示器名稱的顯示格式，示例代碼如下。axisName:{formatter:'【{value}】'}模板變量為{value}，表示指示器名稱1.雷達(dá)圖指示器名稱知識儲備②使用回調(diào)函數(shù)設(shè)置指示器名稱的顯示格式，示例代碼如下。axisName:{formatter:function(value,indicator){return'【'+value+'】';}}formatter屬性的值為回調(diào)函數(shù)，該回調(diào)函數(shù)的第1個參數(shù)是指示器名稱，第2個參數(shù)是每個維度指示器名稱的配置項。1.雷達(dá)圖指示器名稱知識儲備2.雷達(dá)圖坐標(biāo)軸軸線

先定一個小目標(biāo)！掌握坐標(biāo)軸軸線的使用方法，能夠設(shè)置雷達(dá)圖中的坐標(biāo)軸軸線知識儲備在ECharts中，可以通過radar對象的axisLine屬性對雷達(dá)圖坐標(biāo)軸軸線進(jìn)行設(shè)置。axisLine屬性的值為axisLine對象，該對象的設(shè)置方式如下。radar:{axisLine:{}}2.雷達(dá)圖坐標(biāo)軸軸線知識儲備axisLine對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示坐標(biāo)軸軸線，默認(rèn)值為true，表示顯示坐標(biāo)軸軸線symbol用于設(shè)置軸線兩邊的箭頭symbolSize用于設(shè)置軸線兩邊箭頭的大小，第一個數(shù)字表示寬度（垂直坐標(biāo)軸方向），第二個數(shù)字表示高度（平行坐標(biāo)軸方向）。默認(rèn)值為[10,15]symbolOffset用于設(shè)置軸線兩邊箭頭的偏移距離，如果是數(shù)組，第一個數(shù)字表示起始箭頭的偏移距離，第二個數(shù)字表示末端箭頭的偏移距離；如果是數(shù)字，表示這兩個箭頭使用同樣的偏移距離。默認(rèn)值為[0,0]lineStyle用于設(shè)置坐標(biāo)軸軸線的樣式2.雷達(dá)圖坐標(biāo)軸軸線知識儲備（1）symbol屬性symbol屬性用于設(shè)置軸線兩邊的箭頭，其值為字符串或數(shù)組類型，默認(rèn)值為none，表示不顯示箭頭。當(dāng)symbol屬性的值為字符串時，表示軸線的兩端使用同樣的箭頭。當(dāng)symbol屬性的值為長度為2的字符串?dāng)?shù)組時，該數(shù)組中的兩個元素表示軸線兩端的箭頭。symbol屬性的可選值包括circle、rect、roundRect、triangle、diamond、pin、arrow、none等。2.雷達(dá)圖坐標(biāo)軸軸線知識儲備2.雷達(dá)圖坐標(biāo)軸軸線（2）lineStyle屬性lineStyle屬性的值為lineStyle對象，該對象的常用屬性如下。color：用于設(shè)置坐標(biāo)軸軸線的顏色，默認(rèn)值為#333。width：用于設(shè)置坐標(biāo)軸軸線的線寬，默認(rèn)值為1。type：用于設(shè)置軸線的類型，可選值為solid、dashed、dotted，默認(rèn)值為solid。cap：用于指定線段末端的繪制方式，可選值為butt、round、square，默認(rèn)值為butt。

該屬性從ECharts5.0開始支持。shadowBlur：用于設(shè)置圖形陰影的模糊大小。shadowColor：用于設(shè)置陰影顏色。shadowOffsetX：用于設(shè)置陰影水平方向上的偏移距離。shadowOffsetY：用于設(shè)置陰影垂直方向上的偏移距離。opacity：用于設(shè)置圖形的不透明度。知識儲備3.雷達(dá)圖坐標(biāo)軸分隔線

先定一個小目標(biāo)！掌握坐標(biāo)軸分隔線的使用方法，能夠設(shè)置雷達(dá)圖中的坐標(biāo)軸分隔線知識儲備在ECharts中，可以通過radar對象的splitLine屬性對雷達(dá)圖坐標(biāo)軸分隔線進(jìn)行設(shè)置。splitLine屬性的值為splitLine對象，該對象的設(shè)置方式如下。radar:{splitLine:{}}3.雷達(dá)圖坐標(biāo)軸分隔線知識儲備splitLine對象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示分隔線，默認(rèn)值為true，表示顯示數(shù)值軸，不顯示類目軸lineStyle用于設(shè)置分隔線的樣式3.雷達(dá)圖坐標(biāo)軸分隔線lineStyle屬性的值為lineStyle對象，該對象的常用屬性如下。color：用于設(shè)置分隔線顏色，其值為數(shù)組或字符串類型，可以將分隔線顏色設(shè)置成單個顏色，也可以設(shè)置成顏色數(shù)組。分隔線會按數(shù)組中顏色的順序依次循環(huán)設(shè)置顏色。默認(rèn)值為#ccc。width：用于設(shè)置分隔線寬，默認(rèn)值為1。任務(wù)實現(xiàn)

先定一個小目標(biāo)！掌握自定義雷達(dá)圖的使用，能夠根據(jù)需求繪制自定義雷達(dá)圖任務(wù)實現(xiàn)創(chuàng)建customRadar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2基于多個供應(yīng)商不同維度的對比繪制自定義雷達(dá)圖初始化ECharts實例對象，準(zhǔn)備配置項，將配置項設(shè)置給ECharts實例對象。設(shè)置自定義雷達(dá)圖的標(biāo)題、圖例。配置雷達(dá)圖的坐標(biāo)系。步驟5步驟3步驟4設(shè)置自定義雷達(dá)圖的數(shù)據(jù)。步驟6任務(wù)實現(xiàn)瀏覽器中打開customRadar.html文件，多個供應(yīng)商不同維度的對比的自定義雷達(dá)圖效果如下圖所示。常見的旭日圖和關(guān)系圖4.2繪制旭日圖【任務(wù)4.2.1】任務(wù)需求經(jīng)濟學(xué)有一個觀點：“保持良好的供求關(guān)系是社會經(jīng)濟發(fā)展的目標(biāo)之一”。某公司在年度總結(jié)大會上發(fā)現(xiàn)東西部用戶需求量與供應(yīng)商供給量存在較大差異，故決定明年將根據(jù)今年全國各地區(qū)玫瑰花銷售情況來調(diào)整供給量。杜經(jīng)理希望繪制一張旭日圖來展示各地區(qū)玫瑰花的銷量情況，以便更好地制定相應(yīng)的措施。本任務(wù)需要基于各地區(qū)玫瑰花銷量繪制旭日圖。任務(wù)需求該公司今年的各地區(qū)玫瑰花銷量（單位：扎）如下表所示。地區(qū)銷量地區(qū)銷量東北遼寧省200華東山東省121吉林省90江蘇省130黑龍江省145安徽省289華北北京市500浙江省345天津市400福建省265河北省300江西省200山西省320上海市524內(nèi)蒙古自治區(qū)200西北寧夏回族自治區(qū)432華中湖北省230新疆維吾爾自治區(qū)158湖南省190青海省245河南省80陜西省385華南廣東省123甘肅省156廣西壯族自治區(qū)321西南四川省287海南省222云南省158香港特別行政區(qū)100貴州省255澳門特別行政區(qū)210西藏自治區(qū)165華東臺灣省165重慶市145知識儲備1.初識旭日圖

先定一個小目標(biāo)！了解旭日圖的概念，能夠說出什么是旭日圖知識儲備為了展示多個層級之間的關(guān)系，可以使用旭日圖。旭日圖相當(dāng)于多張餅圖的疊加，能夠同時表示多個層級之間的全局和局部關(guān)系，因此在多層級數(shù)據(jù)的情況下，旭日圖更為實用。1.初識旭日圖知識儲備旭日圖由多層的環(huán)形圖組成，一個圓環(huán)代表一個層級的分類數(shù)據(jù)，一個環(huán)塊所代表的數(shù)值可以體現(xiàn)該數(shù)據(jù)在同層級數(shù)據(jù)中的占比。旭日圖是一種父子級構(gòu)成類圖表，可以表現(xiàn)層級數(shù)據(jù)，內(nèi)層數(shù)據(jù)是相鄰?fù)鈱訑?shù)據(jù)的父類別，最內(nèi)層圓環(huán)的分類級別最高，越往外，分類級別越低，分類內(nèi)容越具體。1.初識旭日圖知識儲備在ECharts中繪制旭日圖時，需要將系列的type屬性的值設(shè)置為sunburst，示例代碼如下。series:[{type:'sunburst'}]1.初識旭日圖知識儲備旭日圖的效果如下圖所示。1.初識旭日圖知識儲備2.單擊旭日圖節(jié)點后的行為

先定一個小目標(biāo)！熟悉單擊旭日圖節(jié)點后的行為，能夠總結(jié)單擊旭日圖節(jié)點后的行為知識儲備2.單擊旭日圖節(jié)點后的行為旭日圖默認(rèn)支持?jǐn)?shù)據(jù)下鉆，即當(dāng)用戶單擊了某個扇形塊之后，將會以該節(jié)點作為根節(jié)點顯示，并且在中間出現(xiàn)一個返回上層節(jié)點的圓。如果不希望有數(shù)據(jù)下鉆的功能，可以通過系列的nodeClick屬性設(shè)置。nodeClick屬性用于設(shè)置單擊旭日圖節(jié)點后的行為。nodeClick屬性的常用的可選值如下。false：單擊節(jié)點無反應(yīng)。rootToNode：單擊節(jié)點后以該節(jié)點為根節(jié)點進(jìn)行圖表的展示。知識儲備設(shè)置單擊旭日圖節(jié)點后行為的示例代碼如下。series:[{type:'sunburst',nodeClick:'rootToNode'}]2.單擊旭日圖節(jié)點后的行為知識儲備3.旭日圖的數(shù)據(jù)

先定一個小目標(biāo)！掌握旭日圖數(shù)據(jù)的使用方法，能夠設(shè)置旭日圖中所需的數(shù)據(jù)知識儲備通過系列的data屬性可以指定旭日圖的數(shù)據(jù)。在旭日圖中，data屬性的數(shù)據(jù)格式是樹狀的，該屬性的值為data對象。3.旭日圖的數(shù)據(jù)知識儲備旭日圖中data對象的常用屬性如下表所示。屬性說明value用于設(shè)置數(shù)據(jù)值children用于設(shè)置子節(jié)點，其格式同data屬性的一致name用于設(shè)置顯示在扇形塊中的描述性文字link用于設(shè)置單擊此節(jié)點可跳轉(zhuǎn)的超鏈接，在系列的nodeClick屬性值為link時才生效target用于設(shè)置在何處打開鏈接文檔，相當(dāng)于<a>標(biāo)簽的target屬性，可選值為blank（默認(rèn)值）、self，分別表示內(nèi)容在新窗口中打開、內(nèi)容在當(dāng)前窗口中打開3.旭日圖的數(shù)據(jù)知識儲備設(shè)置旭日圖數(shù)據(jù)的示例代碼如下。data:[{name:'parent1',children:[{name:'child1',value:3}]},{name:'parent2',value:10}]3.旭日圖的數(shù)據(jù)任務(wù)實現(xiàn)

先定一個小目標(biāo)！掌握旭日圖的使用，能夠根據(jù)需求繪制旭日圖任務(wù)實現(xiàn)基于各地區(qū)玫瑰花銷量繪制旭日圖創(chuàng)建sunburst.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實例對象，準(zhǔn)備配置項，將配置項設(shè)置給ECharts實例對象。根據(jù)任務(wù)需求給出的表格中的數(shù)據(jù)定義旭日圖的數(shù)據(jù)。設(shè)置旭日圖的配置項。步驟5步驟3步驟4任務(wù)實現(xiàn)瀏覽器中打開sunburst.html文件，各地區(qū)玫瑰花銷量的旭日圖效果如下圖所示。任務(wù)實現(xiàn)單擊華北節(jié)點后的頁面效果如下圖所示。任務(wù)實現(xiàn)單擊北京市節(jié)點后的頁面效果如下圖所示。繪制圓角旭日圖【任務(wù)4.2.2】任務(wù)需求“民以食為天?！彪S著中國經(jīng)濟的飛速發(fā)展，“吃飽”對于中國人來說已不是問題，而如何“吃好”是人們的新關(guān)注點。某餐飲店作為行業(yè)“龍頭”，為引領(lǐng)國內(nèi)美食文化，決定謀求多元化發(fā)展，集傳統(tǒng)八大菜系于一體。葉經(jīng)理希望繪制一張圓角旭日圖來展示該店部分菜系中不同菜品的銷售情況，從而掌握客戶的喜好，更好地服務(wù)客戶。本任務(wù)需要基于八大菜系美食的銷量繪制圓角旭日圖。該餐飲店近期的八大菜系美食的銷量（單位：份）如下表所示。任務(wù)需求美食銷量美食銷量川菜辣子雞20蘇菜松鼠鱖魚23川味火鍋15閩菜佛跳墻14水煮肉13福建釀豆腐11魚香肉絲21浙菜干菜燜肉21魯菜糖醋鯉魚20荷葉粉蒸肉15粵菜白切雞16西湖醋魚17潮汕牛肉火鍋8龍井蝦仁25湘菜剁椒魚頭9徽菜臭鱖魚19長沙麻仁香酥鴨30徽州毛豆腐10知識儲備1.旭日圖扇形塊的文本標(biāo)簽樣式

先定一個小目標(biāo)！掌握旭日圖扇形塊的文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等知識儲備通過系列的label屬性可以設(shè)置旭日圖中某個扇形塊的文本標(biāo)簽的樣式，以及說明圖形的一些數(shù)據(jù)信息，如值、名稱等。label屬性的值為label對象，該對象的設(shè)置方式如下。series:[{label:{}}]1.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備旭日圖中l(wèi)abel對象的常用屬性如下表所示。屬性說明rotate用于設(shè)置文本標(biāo)簽的旋轉(zhuǎn)角度align用于設(shè)置文字的對齊方式，可選值為left、center（默認(rèn)值）、right，分別表示靠近內(nèi)圈對齊、居中對齊、靠近外圈對齊minAngle用于設(shè)置某個扇形塊角度小于該值時，扇形塊對應(yīng)的文字不顯示。該值用于隱藏過小的扇形塊中的文字，默認(rèn)值為0show用于設(shè)置是否顯示標(biāo)簽，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示position用于設(shè)置標(biāo)簽的位置1.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備>>接上表屬性說明distance用于設(shè)置標(biāo)簽距離圖形元素的距離，當(dāng)position屬性值為top、insideRight的時候有效，默認(rèn)值為5color用于設(shè)置文字的顏色，默認(rèn)值為#ffffontSize用于設(shè)置文字的字體大小，默認(rèn)值為12borderWidth用于設(shè)置文字塊邊框的寬度，默認(rèn)值為0padding用于設(shè)置文字塊的內(nèi)邊距borderRadius用于設(shè)置文字塊的圓角，默認(rèn)值為01.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備（1）rotate屬性rotate屬性用于設(shè)置文本標(biāo)簽的旋轉(zhuǎn)角度，其值為字符串或數(shù)字類型。字符串類型：可選值為radial（默認(rèn)值）、tangential，分別表示徑向旋轉(zhuǎn)、切向旋轉(zhuǎn)。數(shù)字類型：表示標(biāo)簽的旋轉(zhuǎn)角，范圍為-90°到90°，正值表示逆時針旋轉(zhuǎn)。如果可選值為0，則文字不進(jìn)行旋轉(zhuǎn)。1.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備（2）position屬性position屬性用于設(shè)置標(biāo)簽的位置，其值為字符串或數(shù)組類型，下面分別進(jìn)行講解。字符串類型：可選值為top、left、right、bottom、inside（默認(rèn)值）、insideLeft、insideRight、insideTop、insideBottom、insideTopLeft、insideBottomLeft、insideTopRight、insideBottomRight等。數(shù)組類型：標(biāo)簽的位置可以以數(shù)組的形式表示，可將數(shù)組元素設(shè)置成像素值或者百分比字符串。1.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備使用字符串類型的數(shù)據(jù)聲明標(biāo)簽位置，示例代碼如下。label:{position:'right'}將標(biāo)簽位置設(shè)置成像素值的示例代碼如下。position:[10,10]將標(biāo)簽位置設(shè)置成百分比字符串的示例代碼如下。position:['50%','50%']1.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備（3）padding屬性padding屬性用于設(shè)置文字塊的內(nèi)邊距，其值為數(shù)字或數(shù)組類型，默認(rèn)值為0。padding屬性的可選值的示例如下。padding:[3,4,5,6]：表示[上,右,下,左]的邊距。padding:4：表示padding:[4,4,4,4]。padding:[3,4]：表示padding:[3,4,3,4]。1.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備設(shè)置文本標(biāo)簽樣式的示例代碼如下。series:[{label:{

rotate:'tangential',align:'center',minAngle:10,show:true,position:'top',distance:5,color:'#ccc',borderWidth:2,borderRadius:10}}]1.旭日圖扇形塊的文本標(biāo)簽樣式知識儲備2.旭日圖的半徑

先定一個小目標(biāo)！熟悉旭日圖半徑的設(shè)置方法，能夠總結(jié)旭日圖半徑的正確設(shè)置方法知識儲備旭日圖的半徑可以通過系列的radius屬性來設(shè)置。設(shè)置旭日圖半徑的示例代碼如下。series:[{type:'sunburst',radius:[0,'75%']//默認(rèn)值

}]2.旭日圖的半徑知識儲備radius屬性值可以為以下3種類型的數(shù)據(jù)。數(shù)字：直接指定外半徑值。當(dāng)radius屬性值為數(shù)字時，表示像素值。百分比字符串：例如20%，表示外半徑為可視區(qū)域尺寸的20%。當(dāng)radius屬性值為百分比字符串時，它是相對于容器寬度中較短的一條邊的。如果寬度大于高度，則百分比是相對于高度的。數(shù)組：數(shù)組中的第一項是內(nèi)半徑，第二項是外半徑。2.旭日圖的半徑知識儲備3.旭日圖扇形塊的樣式

先定一個小目標(biāo)！掌握旭日圖扇形塊樣式的設(shè)置方法，能夠設(shè)置旭日圖中扇形塊的樣式知識儲備在旭日圖中可以對某個扇形塊進(jìn)行樣式設(shè)置，使旭日圖更加美觀。通過系列的itemStyle屬性可以設(shè)置扇形塊的樣式。itemStyle屬性的值為itemStyle對象，該對象的設(shè)置方式如下。series:[{itemStyle:{}}]3.旭日圖扇形塊的樣式知識儲備itemStyle對象的常用屬性如下表所示。屬性說明color用于設(shè)置圖形的顏色，默認(rèn)從全局調(diào)色盤中獲取顏色borderColor用于設(shè)置圖形的描邊顏色，默認(rèn)值為whiteborderWidth用于設(shè)置描邊線寬，值為0時無描邊，默認(rèn)值為1borderType用于設(shè)置描邊類型，可選值為solid（默認(rèn)值）、dashed、dottedborderCap指定線段末端的繪制方式，可選值為butt（默認(rèn)值）、round、square，分別表示線段末端以方形結(jié)束、線段末端以圓形結(jié)束，線段末端以方形結(jié)束（會增加一個寬度和線段寬度相同、高度是線段厚度一半的矩形區(qū)域）borderRadius用于設(shè)置旭日圖扇形塊的內(nèi)外圓角半徑，默認(rèn)值為03.旭日圖扇形塊的樣式知識儲備從ECharts5.3.0開始，borderRadius屬性支持分別配置從內(nèi)到外順時針方向4個角的圓角半徑，百分比字符串從相對于內(nèi)外扇形半徑更改為相對于內(nèi)外扇形的半徑差。borderRadius屬性支持的類型如下。borderRadius:10：表示內(nèi)圓角半徑和外圓角半徑都是10。borderRadius:'20%'：表示內(nèi)圓角半徑和外圓角半徑都是扇形塊半徑的20%。borderRadius:[10,20]：表示為環(huán)形圖時，內(nèi)圓角半徑是10，外圓角半徑是20。borderRadius:['20%','50%']：表示為環(huán)形圖時，內(nèi)圓角半徑是內(nèi)外圓半徑差的20%、外圓角半徑是內(nèi)外圓半徑差的50%。borderRadius:[5,10,15,20]：表示內(nèi)圓角半徑分別為5和10，外圓角半徑分別為15和20。3.旭日圖扇形塊的樣式知識儲備設(shè)置扇形塊樣式的示例代碼如下。series:[{type:'sunburst',itemStyle:{color:'#ccc',borderColor:'black',borderWidth:2,borderType:'dotted',borderRadius:10}}]3.旭日圖扇形塊的樣式知識儲備4.旭日圖的多層樣式

先定一個小目標(biāo)！掌握旭日圖的多層樣式的設(shè)置方法，能夠設(shè)置不同層的樣式知識儲備旭日圖具有一種有層次的結(jié)構(gòu)，為了方便同一層樣式的配置，可以使用系列的levels屬性。levels屬性的值是levels數(shù)組，數(shù)組中的第1個元素表示數(shù)據(jù)下鉆后返回上級的圖形，其后的每個元素分別表示從圓心向外層的層級。levels數(shù)組的設(shè)置方式如下。series:[{levels:[{}]}],4.旭日圖的多層樣式知識儲備levels數(shù)組中每一個元素都為一個levels對象，該對象的常用屬性如下表所示。屬性說明radius用于設(shè)置當(dāng)前層的內(nèi)半徑和外半徑，為數(shù)組類型的數(shù)據(jù)label用于設(shè)置當(dāng)前層每個扇形塊中文本標(biāo)簽的樣式itemStyle用于設(shè)置當(dāng)前層每個扇形塊的樣式4.旭日圖的多層樣式知識儲備設(shè)置旭日層多層樣式的示例代碼如下。series:[{type:'sunburst',levels:[{},

{radius:['15%','50%'],itemStyle:{color:'red'},label:{color:'green'}}]}]4.旭日圖的多層樣式任務(wù)實現(xiàn)

先定一個小目標(biāo)！掌握圓角旭日圖的使用，能夠根據(jù)需求繪制圓角旭日圖任務(wù)實現(xiàn)基于八大菜系美食的銷量繪制圓角旭日圖創(chuàng)建roundedSunburst.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個指定了寬度和高度的父容器。步驟1步驟2初始化ECharts實例對象，準(zhǔn)備配置項，將配置項設(shè)置給ECharts實例對象。根據(jù)任務(wù)需求給出的表格中的數(shù)據(jù)定義圓角旭日圖的數(shù)據(jù)。設(shè)置圓角旭日圖的配置項。步驟5步驟3步驟4任務(wù)實現(xiàn)在瀏覽器中打開roundedSunburst.html文件，八大菜系美食的銷量的圓角旭日圖效果如下圖所示。繪制關(guān)系圖【任務(wù)4.2.3】任務(wù)需求“欲窮千里目，更上一層樓?！睂W(xué)習(xí)與生活也是如此，想要有收獲，就必須不斷開闊眼界，邁出屬于自己的腳步。作為一名學(xué)生，小文深知這一點，所以經(jīng)常閱讀經(jīng)典著作來充實自己，同時他還會對經(jīng)典著作進(jìn)行概括梳理，加深對書中人物的印象，得出自己的理解。近期，他又重讀了《西游記》這本經(jīng)典著作，并對書中的部分人物關(guān)系進(jìn)行了整理。本任務(wù)需要基于《西游記》中部分人物關(guān)系繪制關(guān)系圖?！段饔斡洝分胁糠秩宋镪P(guān)系如下表所示。任務(wù)需求人物關(guān)系唐僧——孫悟空師徒唐僧——豬八戒師徒人物關(guān)系唐僧——白龍馬坐騎唐僧——沙悟凈師徒知識儲備1.初識關(guān)系圖

先定一個小目標(biāo)！了解關(guān)系圖的概念，能夠說出什么是關(guān)系圖知識儲備關(guān)系圖采用一種圖形化的方式展示實體之間關(guān)系。在關(guān)系圖中，常用節(jié)點表示每個實體，用一個節(jié)點和其他節(jié)點之間的邊表示它們之間的關(guān)系。關(guān)系圖用于展示事物的相關(guān)性和關(guān)聯(lián)性，使用關(guān)系圖可以將各個要素之間的關(guān)系可視化，提高整理歸納及理解分析的效率。1.初識關(guān)系圖知識儲備在ECharts中繪制關(guān)系圖時，需要將系列的type屬性的值設(shè)置為graph，示例代碼如下。series:[{type:'graph'}]1.初識關(guān)系圖知識儲備關(guān)系圖的效果如下圖所示。1.初識關(guān)系圖知識儲備2.關(guān)系圖的數(shù)據(jù)

先定一個小目標(biāo)！掌握關(guān)系圖數(shù)據(jù)的使用方法，能夠設(shè)置關(guān)系圖中所需的數(shù)據(jù)知識儲備通過系列的data屬性可以設(shè)置關(guān)系圖的數(shù)據(jù)，生成關(guān)系圖節(jié)點的數(shù)據(jù)列表。data屬性的值為data對象，其常用屬性如下表所示。屬性說明name用于設(shè)置數(shù)據(jù)項名稱x用于設(shè)置節(jié)點的初始x值，在不指定的時候需要指定layout屬性的值選擇布局方式y(tǒng)用于設(shè)置節(jié)點的初始y值，在不指定的時候需要指定layout屬性的值選擇布局方式value用于設(shè)置數(shù)據(jù)項值target用于設(shè)置在何處打開鏈接文檔，可選值為blank（默認(rèn)值）、self2.關(guān)系圖的數(shù)據(jù)知識儲備layout屬性用于指定關(guān)系圖的布局方式，默認(rèn)值為none，可選值如下。none：表示不采用任何布局，使用節(jié)點中提供的x、y屬性作為節(jié)點的位置。circular：表示采用環(huán)形布局。force：表示采用力引導(dǎo)布局。2.關(guān)系圖的數(shù)據(jù)知識儲備設(shè)置關(guān)系圖中所需數(shù)據(jù)的示例代碼如下。data:[{name:'Node1',x:300,y:300}]2.關(guān)系圖的數(shù)據(jù)知識儲備3.關(guān)系圖節(jié)點標(biāo)記大小

先定一個小目標(biāo)！掌握關(guān)系圖節(jié)點標(biāo)記大小的設(shè)置方法，能夠設(shè)置節(jié)點標(biāo)記大小知識儲備通過系列的symbolSize屬性可以設(shè)置關(guān)系圖節(jié)點標(biāo)記的大小，其值為數(shù)字類型或數(shù)組類型。將關(guān)系圖節(jié)點標(biāo)記大小設(shè)置為數(shù)字類型，示例代碼如下。symbolSize:50將關(guān)系圖節(jié)點標(biāo)記大小設(shè)置為數(shù)組類型，示例代碼如下。symbolSize:[20,10]3.關(guān)系圖節(jié)點標(biāo)記大小知識儲備4.關(guān)系圖節(jié)點間的關(guān)系數(shù)據(jù)

先定一個小目標(biāo)！掌握關(guān)系圖節(jié)點間關(guān)系數(shù)據(jù)的使用方法，能夠設(shè)置節(jié)點間的關(guān)系數(shù)據(jù)知識儲備通過系列的links屬性可以設(shè)置關(guān)系圖節(jié)點間的關(guān)系數(shù)據(jù)。links屬性的值為links對象，該對象的常用屬性如下表所示。屬性說明source用于設(shè)置邊的源節(jié)點名稱