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

第4章雷達(dá)圖、旭日?qǐng)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)軸分隔線熟悉單擊旭日?qǐng)D節(jié)點(diǎn)后的行為，能夠總結(jié)單擊旭日?qǐng)D節(jié)點(diǎn)后的行為掌握旭日?qǐng)D數(shù)據(jù)的使用方法，能夠設(shè)置旭日?qǐng)D中所需的數(shù)據(jù)學(xué)習(xí)目標(biāo)/Target掌握旭日?qǐng)D文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等熟悉旭日?qǐng)D半徑的設(shè)置方法，能夠總結(jié)旭日?qǐng)D半徑的正確使用方法掌握旭日?qǐng)D扇形塊樣式的設(shè)置方法，能夠設(shè)置旭日?qǐng)D中扇形塊的樣式掌握旭日?qǐng)D的多層樣式的設(shè)置方法，能夠設(shè)置不同層的樣式學(xué)習(xí)目標(biāo)/Target掌握關(guān)系圖數(shù)據(jù)的使用方法，能夠設(shè)置關(guān)系圖中所需的數(shù)據(jù)掌握關(guān)系圖節(jié)點(diǎn)標(biāo)記大小的設(shè)置方法，能夠設(shè)置節(jié)點(diǎn)標(biāo)記大小掌握關(guān)系圖節(jié)點(diǎn)間關(guān)系數(shù)據(jù)的使用方法，能夠設(shè)置節(jié)點(diǎn)間的關(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á)圖的繪制

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

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

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

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

radar:{}};2.雷達(dá)圖坐標(biāo)系組件知識(shí)儲(chǔ)備radar對(duì)象的常用屬性如下表所示。屬性說明center用于設(shè)置雷達(dá)圖的中心坐標(biāo)radius用于設(shè)置雷達(dá)圖的半徑，默認(rèn)值為75%startAngle用于設(shè)置坐標(biāo)的系起始角度，即第一條指示器軸的角度，默認(rèn)值為90indicator用于設(shè)置雷達(dá)圖的指示器2.雷達(dá)圖坐標(biāo)系組件知識(shí)儲(chǔ)備>>接上表屬性說明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)系組件知識(shí)儲(chǔ)備（1）center屬性center屬性用于設(shè)置雷達(dá)圖的中心坐標(biāo)，坐標(biāo)以數(shù)組的形式表示，默認(rèn)值為['50%','50%']。數(shù)組的第一項(xiàng)是橫坐標(biāo)，第二項(xiàng)是縱坐標(biāo)，數(shù)組元素可以被設(shè)置成像素值或百分比字符串。將雷達(dá)圖的中心坐標(biāo)設(shè)置為像素值，示例代碼如下。2.雷達(dá)圖坐標(biāo)系組件center:[400,200]第一項(xiàng)表示雷達(dá)圖中心坐標(biāo)的橫坐標(biāo)為400像素，第二項(xiàng)表示雷達(dá)圖中心坐標(biāo)的縱坐標(biāo)為200像素知識(shí)儲(chǔ)備將雷達(dá)圖的中心坐標(biāo)設(shè)置為百分比字符串，示例代碼如下。2.雷達(dá)圖坐標(biāo)系組件center:['50%','50%']第一項(xiàng)表示雷達(dá)圖中心坐標(biāo)的橫坐標(biāo)為容器寬度50%的位置，第二項(xiàng)表示雷達(dá)圖中心坐標(biāo)的縱坐標(biāo)為容器高度50%的位置知識(shí)儲(chǔ)備（2）indicator屬性indicator屬性用于設(shè)置雷達(dá)圖的指示器，該屬性的值為indicator對(duì)象，該對(duì)象的常用屬性如下表所示。屬性說明name用于設(shè)置指示器的名稱max用于設(shè)置指示器的最大值，默認(rèn)值為100min用于設(shè)置指示器的最小值，默認(rèn)值為0color用于設(shè)置標(biāo)簽特定的顏色2.雷達(dá)圖坐標(biāo)系組件知識(shí)儲(chǔ)備設(shè)置雷達(dá)圖的指示器的示例代碼如下。radar:{indicator:[{name:'抗壓力',max:100},{name:'溝通力',max:90},]}2.雷達(dá)圖坐標(biāo)系組件知識(shí)儲(chǔ)備（3）splitArea屬性splitArea屬性用于設(shè)置雷達(dá)圖坐標(biāo)軸在繪圖區(qū)域中的分隔區(qū)域，該屬性的值為splitArea對(duì)象，該對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示分隔區(qū)域，默認(rèn)值為true，表示顯示，設(shè)為false表示不顯示areaStyle用于設(shè)置分隔區(qū)域的樣式2.雷達(dá)圖坐標(biāo)系組件知識(shí)儲(chǔ)備areaStyle屬性的值為areaStyle對(duì)象，該對(duì)象的常用屬性如下。color：用于設(shè)置分隔區(qū)域的顏色，color屬性值為數(shù)組類型，分隔區(qū)域會(huì)按數(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時(shí)不繪制該圖形，默認(rèn)值為1。2.雷達(dá)圖坐標(biāo)系組件知識(shí)儲(chǔ)備設(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ù)實(shí)現(xiàn)

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

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

先定一個(gè)小目標(biāo)！掌握坐標(biāo)軸軸線的使用方法，能夠設(shè)置雷達(dá)圖中的坐標(biāo)軸軸線知識(shí)儲(chǔ)備在ECharts中，可以通過radar對(duì)象的axisLine屬性對(duì)雷達(dá)圖坐標(biāo)軸軸線進(jìn)行設(shè)置。axisLine屬性的值為axisLine對(duì)象，該對(duì)象的設(shè)置方式如下。radar:{axisLine:{}}2.雷達(dá)圖坐標(biāo)軸軸線知識(shí)儲(chǔ)備axisLine對(duì)象的常用屬性如下表所示。屬性說明show用于設(shè)置是否顯示坐標(biāo)軸軸線，默認(rèn)值為true，表示顯示坐標(biāo)軸軸線symbol用于設(shè)置軸線兩邊的箭頭symbolSize用于設(shè)置軸線兩邊箭頭的大小，第一個(gè)數(shù)字表示寬度（垂直坐標(biāo)軸方向），第二個(gè)數(shù)字表示高度（平行坐標(biāo)軸方向）。默認(rèn)值為[10,15]symbolOffset用于設(shè)置軸線兩邊箭頭的偏移距離，如果是數(shù)組，第一個(gè)數(shù)字表示起始箭頭的偏移距離，第二個(gè)數(shù)字表示末端箭頭的偏移距離；如果是數(shù)字，表示這兩個(gè)箭頭使用同樣的偏移距離。默認(rèn)值為[0,0]lineStyle用于設(shè)置坐標(biāo)軸軸線的樣式2.雷達(dá)圖坐標(biāo)軸軸線知識(shí)儲(chǔ)備（1）symbol屬性symbol屬性用于設(shè)置軸線兩邊的箭頭，其值為字符串或數(shù)組類型，默認(rèn)值為none，表示不顯示箭頭。當(dāng)symbol屬性的值為字符串時(shí)，表示軸線的兩端使用同樣的箭頭。當(dāng)symbol屬性的值為長(zhǎng)度為2的字符串?dāng)?shù)組時(shí)，該數(shù)組中的兩個(gè)元素表示軸線兩端的箭頭。symbol屬性的可選值包括circle、rect、roundRect、triangle、diamond、pin、arrow、none等。2.雷達(dá)圖坐標(biāo)軸軸線知識(shí)儲(chǔ)備2.雷達(dá)圖坐標(biāo)軸軸線（2）lineStyle屬性lineStyle屬性的值為lineStyle對(duì)象，該對(duì)象的常用屬性如下。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è)置圖形的不透明度。知識(shí)儲(chǔ)備3.雷達(dá)圖坐標(biāo)軸分隔線

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

先定一個(gè)小目標(biāo)！掌握自定義雷達(dá)圖的使用，能夠根據(jù)需求繪制自定義雷達(dá)圖任務(wù)實(shí)現(xiàn)創(chuàng)建customRadar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入echarts.js文件。定義一個(gè)指定了寬度和高度的父容器。步驟1步驟2基于多個(gè)供應(yīng)商不同維度的對(duì)比繪制自定義雷達(dá)圖初始化ECharts實(shí)例對(duì)象，準(zhǔn)備配置項(xiàng)，將配置項(xiàng)設(shè)置給ECharts實(shí)例對(duì)象。設(shè)置自定義雷達(dá)圖的標(biāo)題、圖例。配置雷達(dá)圖的坐標(biāo)系。步驟5步驟3步驟4設(shè)置自定義雷達(dá)圖的數(shù)據(jù)。步驟6任務(wù)實(shí)現(xiàn)瀏覽器中打開customRadar.html文件，多個(gè)供應(yīng)商不同維度的對(duì)比的自定義雷達(dá)圖效果如下圖所示。常見的旭日?qǐng)D和關(guān)系圖4.2繪制旭日?qǐng)D【任務(wù)4.2.1】任務(wù)需求經(jīng)濟(jì)學(xué)有一個(gè)觀點(diǎn)：“保持良好的供求關(guān)系是社會(huì)經(jīng)濟(jì)發(fā)展的目標(biāo)之一”。某公司在年度總結(jié)大會(huì)上發(fā)現(xiàn)東西部用戶需求量與供應(yīng)商供給量存在較大差異，故決定明年將根據(jù)今年全國(guó)各地區(qū)玫瑰花銷售情況來調(diào)整供給量。杜經(jīng)理希望繪制一張旭日?qǐng)D來展示各地區(qū)玫瑰花的銷量情況，以便更好地制定相應(yīng)的措施。本任務(wù)需要基于各地區(qū)玫瑰花銷量繪制旭日?qǐng)D。任務(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華東臺(tái)灣省165重慶市145知識(shí)儲(chǔ)備1.初識(shí)旭日?qǐng)D

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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