雷达图

介绍

雷达图也被称为极坐标图或蜘蛛网图，主要用于表现多变量的数据，例如员工的多维属性分析。

API

Props

参数	说明	类型	默认值
默认状态	支持变量绑定	默认 / 隐藏	默认
数据源	支持变量绑定	DataSource	-
维度	维度的数据字段编码	string	indicator
维度最大值	配置所有维度的最大值，支持变量绑定	Array	[2000,2000,2000,2000,2000,2000]
维度最小值	配置所有维度的最小值，支持变量绑定	Array	[0,0,0,0,0,0]
数值	数值系列的数据字段编码	Array	[{name:value1},{name:value2}]
宽	图表画布宽度	string	500px
高	图表画布高度	string	300px
数值系列	图表数值系列配置	数值系列	-
标题	图表标题配置	标题	-
雷达图形	雷达图形配置	雷达图形	-
图例	图表图例配置	图例	-
提示框	图表提示框配置	提示框	-
唯一标识	组件唯一标识	string	组件 key 值

Props 数值系列

参数	说明	类型	默认值
字段编码	数据字段编码	string	value
系列名	系列名称	string	数值
颜色	系列颜色，对雷达图填充、边框、标记等生效	string	-
线条样式	雷达图边框线条样式	实线 / 虚线 / 点线	实线
线宽	雷达图边框线宽	string	2
填充透明度	雷达图内部填充透明度	string	0.7
显示标记	雷达图系列是否显示标记	boolean	false
标记大小	标记图形大小	string	8
标记类型	标记图形类型	string	circle
显示标签	雷达图系列是否显示标签，前提需要显示标记	boolean	false
字号	雷达图标签字号	string	12
颜色	雷达图标签颜色	string	#FFF

Props 标题

参数	说明	类型	默认值
显示标题	图表标题是否显示	boolean	false
主标题	图表主标题	string	主标题
副标题	图表副标题	string	副标题
自定义参数（title）		code

Props 雷达图形

参数	说明	类型	默认值
圆心左边距	雷达图圆心距离画布左侧边距	string	50%
圆心上边距	雷达图圆心距离画布上侧边距	string	50%
显示轴线	是否显示轴线	boolean	true
轴线样式	轴线样式	实线 / 虚线 / 点线	实线
轴线线宽	轴线线宽	string	1
轴线颜色	轴线颜色	string	#333333
显示分隔线	是否显示分隔线	boolean	true
分隔线样式	分隔线样式	实线 / 虚线 / 点线	实线
分隔线线宽	分隔线线宽	string	1
分隔线颜色	分隔线颜色	string	#CCCCCC
显示分隔区域	是否显示分隔区域	boolean	true
区域填充色 1	分隔区域填充色	string	rgba(250,250,250,0.3)
区域填充色 2	分隔区域填充色	string	rgba(200,200,200,0.3)
自定义参数（radar）		code

Props 图例

参数	说明	类型	默认值
显示图例	图表图例是否显示	boolean	true
图例位置	图例显示位置	自动 / 顶部居左 / 顶部居中 / 顶部居右 / 底部居左 / 底部居中 / 底部居右 / 左侧顶部 / 左侧居中 / 左侧底部 / 右侧顶部 / 右侧居中 / 右侧底部	自动
布局方向	图例排列方向	水平 / 竖直	水平
宽	图例区域宽度	string	auto
高	图例区域高度	string	auto
支持滚动	图例超出宽高后是否支持滚动	boolean	false
自定义参数（legend）		code

Props 提示框

参数	说明	类型	默认值
显示提示框	图表提示框是否显示	boolean	true
触发类型	提示框触发类型	数据项/坐标轴	数据项
背景颜色	提示框背景颜色	string	rgba(50,50,50,0.7)
边框颜色	提示框边框颜色	string	#333333
文字颜色	提示框文字颜色	string	#FFFFFF
字号	提示框文字字号	string	14
自定义参数（tooltip）		code

Type

DataSource

[
  {
    indicator: "维度A",
    value1: "500",
    value2: "600",
  },
  {
    indicator: "维度B",
    value1: "900",
    value2: "100",
  },
  {
    indicator: "维度C",
    value1: "1200",
    value2: "300",
  },
  {
    indicator: "维度D",
    value1: "2000",
    value2: "900",
  },
  {
    indicator: "维度E",
    value1: "1800",
    value2: "2100",
  },
  {
    indicator: "维度F",
    value1: "200",
    value2: "900",
  },
];