第4章雷達圖、旭日圖和關系圖《ECharts數據可視化》學習目標/Target掌握雷達圖坐標系組件的使用方法，能夠設置雷達圖坐標系掌握雷達圖指示器名稱、坐標軸軸線、坐標軸分隔線的設置方法，能夠設置雷達

圖中的指示器名稱、坐標軸軸線、坐標軸分隔線熟悉單擊旭日圖節點后的行為，能夠總結單擊旭日圖節點后的行為掌握旭日圖數據的使用方法，能夠設置旭日圖中所需的數據學習目標/Target掌握旭日圖文本標簽的使用方法，能夠設置文本標簽的顯示狀態、位置等熟悉旭日圖半徑的設置方法，能夠總結旭日圖半徑的正確使用方法掌握旭日圖扇形塊樣式的設置方法，能夠設置旭日圖中扇形塊的樣式掌握旭日圖的多層樣式的設置方法，能夠設置不同層的樣式學習目標/Target掌握關系圖數據的使用方法，能夠設置關系圖中所需的數據掌握關系圖節點標記大小的設置方法，能夠設置節點標記大小掌握關系圖節點間關系數據的使用方法，能夠設置節點間的關系數據掌握關系圖邊兩端標記的使用方法，能夠設置關系圖邊兩端標記學習目標/Target掌握關系圖邊的標簽的使用方法，能夠設置邊的標簽掌握雷達圖的繪制，能夠完成基礎雷達圖和自定義雷達圖的繪制

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

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

type:'radar'}]1.初識基礎雷達圖知識儲備雷達圖的效果如下圖所示。1.初識基礎雷達圖知識儲備2.雷達圖坐標系組件

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

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

shadowOffsetY:20,opacity:1}}}2.雷達圖坐標系組件任務實現

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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