ECharts数据可视化课件 第4章 雷达图、旭日图和关系图

第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用于设置边的源节点名称