雷达图(面)是基础图表的一种,支持使用角度轴和极坐标轴分别展示类目和数值,支持配置网格样式、线条、角度与多系列数据等。能够直观地展示多维度的类目数据对比情况。本文介绍雷达图(面)各配置项的含义。
![编辑雷达图(面)](https://qcloudimg.tencent-cloud.cn/image/document/6653ca892d57e7624be0af985616a7e0.png)
![编辑雷达图(面)](https://qcloudimg.tencent-cloud.cn/image/document/6653ca892d57e7624be0af985616a7e0.png)
编辑组件时,先使用鼠标单击选中组件。
设置属性
位置大小
大小
设置组件的宽与高,单位为 px。
单击![锁定图标](https://qcloudimg.tencent-cloud.cn/image/document/971a8109abfd8ecbc27db43f5a29ed1a.png)
图标,可锁定组件的宽高比,等比例调整组件的宽高。
![锁定图标](https://qcloudimg.tencent-cloud.cn/image/document/971a8109abfd8ecbc27db43f5a29ed1a.png)
再次单击图标,可解锁组件的宽高比,调整宽高将不受等比例限制。
位置
设置组件的坐标位置,单位为 px。
横坐标为组件左上角与画布左边界的距离。
纵坐标为组件左上角与画布上边界的距离。
旋转
手动输入角度值,可调整组件的旋转角度。
拖动![旋转控制图标](https://qcloudimg.tencent-cloud.cn/image/document/145761c24f1b313607df532c772864fd.png)
图标内的小圆点,可调整组件的旋转角度。
![旋转控制图标](https://qcloudimg.tencent-cloud.cn/image/document/145761c24f1b313607df532c772864fd.png)
单击![翻转图标](https://qcloudimg.tencent-cloud.cn/image/document/b74471fc7b4da7c4536f99d2fc8a3991.png)
图标,可设置组件左右或上下翻转样式。
![翻转图标](https://qcloudimg.tencent-cloud.cn/image/document/b74471fc7b4da7c4536f99d2fc8a3991.png)
图表
基础设置
![雷达图设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/3bca2ddf6535e8565d4cb31300d52000.png)
![雷达图设置图 1](https://qcloudimg.tencent-cloud.cn/image/document/3bca2ddf6535e8565d4cb31300d52000.png)
用于设置雷达图的样式。
旋转角度:设置雷达图的旋转角度。
线条宽度:设置雷达图的线条宽度。
数值
字体字号:设置数值的文字字体和字体大小。
文字颜色:设置数值的文字颜色。
网格
字体字号:设置轴标签的文字字体和字体大小。
文字颜色:设置轴标签的文字颜色。
间距:设置轴标签与雷达图的间距。
网格数量:设置雷达图的网络数量。
网格颜色:设置雷达图的网格颜色。
网格类型:设置雷达图的网格类型,可选项包括:实线与虚线。
网格形状:设置雷达图的网格形状,可选项包括:多边形与圆形。
线条宽度:设置雷达图的线条宽度。
坐标轴
![雷达图坐标轴](https://qcloudimg.tencent-cloud.cn/image/document/ea967929ec94ade39e114443044b0ebe.png)
![雷达图坐标轴](https://qcloudimg.tencent-cloud.cn/image/document/ea967929ec94ade39e114443044b0ebe.png)
用于设置雷达图的坐标配置。
极轴
轴线颜色:设置轴线的颜色。
线条宽度:设置轴线的宽度。
刻度值
字体字号:设置刻度值的文字字体和字体大小。
文字颜色:设置刻度值的文字颜色。
系列
![](https://qcloudimg.tencent-cloud.cn/image/document/471e44a56e2ee9c72641ac37cec37ad7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/471e44a56e2ee9c72641ac37cec37ad7.png)
数据系列
配色方案:将选择的色系自动映射为多个系列的颜色。
自动映射:开启后自动和系列值字段映射。点击导入系列值字段后,需要手动导入。
系列
映射字段:设置系列的值与名称,其中系列 s 值表示 s 字段对应的值,不同的值对应不同的系列(一个系列代表显示到图表中的一组数据)。
颜色:设置系列雷达图填充的颜色;
描边颜色:设置系列雷达图边的开始颜色;当开启了渐变色时,此项为渐变色的结束颜色。
结束颜色:设置系列雷达图边的结束颜色;当开启了渐变色时,此项为渐变色的结束颜色。
启用渐变:开启或关闭雷达图边的渐变色。
添加系列
支持新增和删除系列,不同的系列可以自由设置系列属性。
辅助
![标题设置图](https://qcloudimg.tencent-cloud.cn/image/document/b0ce843f827caebfd636f41301ac2dcc.png)
![标题设置图](https://qcloudimg.tencent-cloud.cn/image/document/b0ce843f827caebfd636f41301ac2dcc.png)
标题
标题字体
文本:设置雷达图的标题文字。
字体字号:设置标题的文字字体和字体大小。
文字颜色:设置标题的文字颜色。
文字样式:设置标题的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置标题的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
文字行高:设置标题的文字行高。
对齐方式:设置标题的文字对齐方式,可选项包括:左对齐、居中对齐、右对齐。
位置:设置标题显示在图表中的位置,可选项包括:顶部居中、底部居中、左侧居中、右侧居中、左上、右上、左下、右下。
间距:设置标题相对于图表和边界间的距离。
图例
![图例设置图](https://qcloudimg.tencent-cloud.cn/image/document/c1f720d859d9450db6ce1aeffcd96960.png)
![图例设置图](https://qcloudimg.tencent-cloud.cn/image/document/c1f720d859d9450db6ce1aeffcd96960.png)
图标
图标形状:设置图例中各个系列的图标形状,支持圆形与矩形;其中图标颜色与系列折线颜色一致。
布局朝向:设置图例中各个系列的布局方向,支持水平显示和垂直显示。
字体字号:设置图例的文字字体和字体大小。
文字颜色:设置图例的文字颜色。
文字样式:设置图例的文字样式,可选项包括:默认值、斜体、倾斜。
文字粗细:设置图例的文字粗细,可选项包括:默认值、粗体、更粗、更细、100、200、300、400、500、600、700、800、900(数字越大文字越粗)。
文字行高:设置标题的文字行高。
位置:设置图例显示在图表中的位置,可选项包括:顶部居中、底部居中、左侧居中、右侧居中、左上、右上、左下、右下。
图标距离:设置图标与文字间的距离。
系列间距:设置图例中系列间的距离。
间距:设置图例相对于图表和边界间的距离。
设置数据
数据源
自定义函数
![自定义函数设置图](https://qcloudimg.tencent-cloud.cn/image/document/9e5ff8e690c79da3ce75dc5399fd1f62.png)
![自定义函数设置图](https://qcloudimg.tencent-cloud.cn/image/document/9e5ff8e690c79da3ce75dc5399fd1f62.png)
自定义函数用来对数据源中的数据做处理,需要使用 JavaScript 代码。其中入参
data
是数据源中的数据,返回值需要与数据源中“静态数据”的数据格式保持一致。可用于过滤数据、聚合数据、格式化数据等。字段映射
![字段映射设置图](https://qcloudimg.tencent-cloud.cn/image/document/90a456b4acc0846f1f28a9e598c5d3f5.png)
![字段映射设置图](https://qcloudimg.tencent-cloud.cn/image/document/90a456b4acc0846f1f28a9e598c5d3f5.png)
将数据源中返回的业务字段一一映射为图表提供的默认字段,图表字段的具体意思可查看字段前的问号图标。字段映射成功后,将在状态栏中显示映射成功。
自动更新
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/96be4645a0791479564e07bb966a1571.png)
![自动更新设置图](https://qcloudimg.tencent-cloud.cn/image/document/96be4645a0791479564e07bb966a1571.png)
自动更新用于设置组件定时更新数据,在选择动态数据源或开启自定义函数的情况下该选项才可以设置。当勾选自动更新选项并输入定时时长(单位为秒),系统将根据设定的时长轮询数据源,获取最新数据并更新到相应图表中。