🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### 雷达图组件就是添加雷达图的组件。点击“![](https://img.kancloud.cn/7e/94/7e943cbae6d2a0148ea1b1fe46f2a6ca_31x31.png)”图标,再点击“雷达图”,即可创建新的图像,如图2.61; ![](https://img.kancloud.cn/27/3b/273b84df5dba2d99f394b37641741d0b_972x438.png) ![](https://img.kancloud.cn/db/fb/dbfb33a725ba3598d2cf80d54d44e5d9_796x34.png) ## **一、组件名称设置** ### 选中雷达图组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图2.62。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/66/fe/66fe827a05267563f1e6327de3621c9f_1068x644.png) ![](https://img.kancloud.cn/08/c6/08c6ad045f0ad55563adf43db181192f_797x42.png) ## **二、系统配色** ### 选中该雷达图组件,在操作界面右侧,打开“系统配色”开关,在“配色选择”下拉框中选择主题,来修改雷达图组件的配色,如图2.63。 \*\* 备注:使用系统配色,需要先删除自定义颜色;\*\* * ### 默认配色:效果图如图2.631; * ### 紫色主题:效果图如图2.632; * ### 绿色主题:效果图如图2.633; ![](https://img.kancloud.cn/e1/c1/e1c1f54b9b069f34d7409801d921761b_1057x683.png) ![](https://img.kancloud.cn/2a/f4/2af4decc4d29451d05932c36f15f04f1_798x36.png) ![](https://img.kancloud.cn/ce/3a/ce3a1fc7187b7d591ea507ebd07ccc92_971x276.png) ## **三、字体大小** ### 选中该雷达图,在操作界面右侧的“字体大小”处可修改文字的大小,如图2.64。 ![](https://img.kancloud.cn/62/14/62145ab4a234c0b4ea6d1e857c03997d_1059x471.png) ![](https://img.kancloud.cn/d3/bf/d3bfd22e66c9cc198ba2ccdc3f43bdd0_795x44.png) ## **四、字体颜色** ### 选中该雷达图,在操作界面右侧的“字体颜色”处可修改文字的颜色,如图2.65。 ![](https://img.kancloud.cn/b9/48/b9480232c85c40d6118c16a01eec15a9_1059x457.png) ![](https://img.kancloud.cn/6d/51/6d51ac481da1471ae4bf4d3bf4a64816_802x42.png) ## **五、区域透明度** ### 选中该雷达图组件,在操作界面右侧,拖动“区域透明度”,可设置雷达区域的透明度,如图2.66。 * ### 0~1,透明度不断变小,0的透明度最大,1透明度最小(即不透明); ![](https://img.kancloud.cn/60/63/60637335d0e065ace73aba5ba4bfe4d6_1062x680.png) ![](https://img.kancloud.cn/86/8d/868de46be45cce1c7fbf75787ca28093_798x41.png) ## **六、标题设置** ### 选中该雷达图组件,在操作界面右侧的“标题设置”处可修改雷达图组件的标题样式,如图2.67。 * ### 标题开关:该开关控制标题的显示与隐藏; * ### 标题:标题显示的内容; * ### 字体颜色:标题的颜色; * ### 字体粗细:标题字体的粗细; * ### 字体大小:标题字体大小; * ### 字体位置:标题的位置,分为:居中、左对齐、右对齐; * ### 副标题:副标题内容; * ### 字体颜色:副标题字体颜色; * ### 字体粗细:副标题字体的粗细; * ### 字体大小:副标题字体大小; ![](https://img.kancloud.cn/86/eb/86eb7c41b9375bccf9530f7a32f1bf6f_1125x637.png) ![](https://img.kancloud.cn/cd/ad/cdadf4772ecf45035c01b9d56ea7e802_799x45.png) ## **七、字体设置** ### 选中该雷达图,在操作界面右侧的“字体设置”处可修改雷达图组件的数字字体样式,如图2.68。 * ### 显示:数值文字是否显示; * ### 字体大小:文字的大小; * ### 字体颜色:文字的颜色; * ### 字体粗细:文字的粗细; ![](https://img.kancloud.cn/a2/ed/a2edc20959d94d7679bdcc5858bb9e88_1047x337.png) ![](https://img.kancloud.cn/dd/a4/dda47682c1c7a33fed27910aedd5d31c_798x44.png) ## **八、提示语设置** ### 选中该雷达图组件,在操作界面右侧的“提示语设置”处可修改雷达图组件的提示语,如图2.69。 * ### 字体大小:提示语的字体大小; * ### 字体颜色:提示语的字体颜色; ![](https://img.kancloud.cn/80/61/80617519b13e9f31ee5579332c4beb2d_1044x360.png) ![](https://img.kancloud.cn/96/d3/96d3a4d7bcab3c986029adf6a056a969_796x39.png) ## **九、图例设置** ### 选中该雷达图组件,在操作界面右侧的“图例设置”处可设置图例的样式,如图2.691;效果图如图2.692。 * ### 图例开关:是否显示图例; * ### 图例高度:图例图标的高度; * ### 图例宽度:图例图标的宽度; * ### 位置:图例的位置,分为:居中、左对齐、右对齐; * ### 布局朝向:图例的排列顺序,分为:横排和竖排; * ### 字体大小:图例的字体大小; ![](https://img.kancloud.cn/a2/52/a25281a41aa7fcb880ab1be853d1c7ed_1064x444.png) ![](https://img.kancloud.cn/2d/8d/2d8d5ae6186180f508a97bdb897579e7_801x40.png) ![](https://img.kancloud.cn/48/6e/486eedcd2f39a051ae3485caa595c250_916x512.png) ![](https://img.kancloud.cn/97/d3/97d3eb3026621080666d1f81e7473549_802x43.png) ## **十、自定义配色设置** ### 选中该折线图组件,在操作界面右侧的“自定义配色设置”处可配置上边不能设置的内容,如图2.692。 * ### 文字颜色、 轴线颜色暂时不起作用(后期会有版本优化); * ### 配色:雷达覆盖区域的颜色,如果开启了“系统配色”,需要先把系统配色先关掉,这样自定义的颜色才起作用; ![](https://img.kancloud.cn/08/b0/08b05f12a1f2bf4053f8e01887c1aa99_1017x386.png) ![](https://img.kancloud.cn/c7/92/c7920d5c6ac71d6aaf6d33825ef99dca_793x48.png) ## **十一、接口设置** ### 选中该雷达图组件,在操作界面右侧,点击“![](https://img.kancloud.cn/bd/5c/bd5c789b69043d88cc15dcb52598b435_388x57.png)”,可设置接口,如图2.694。 ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据; * ### 静态数据:写死的数据; * ### 动态数据:会随着接口传过来的数据实时变化;(一般这种比较常用) ### 2\. 接口地址 ### (1)静态数据,接口地址传过来的内容要类似以下格式: ~~~ {"indicator":[{"name":"销售(sales)","max":6500},{"name":"管理(Administration)","max":16000},{"name":"信息技术(Information Techology)","max":30000},{"name":"客服(Customer Support)","max":38000},{"name":"研发(Development)","max":52000},{"name":"市场(Marketing)","max":25000}],"series":[{"data":[{"value":[4300,10000,28000,35000,50000,19000],"name":"预算分配(Allocated Budget)"}]}]} ~~~ ### (2)动态数据,接口地址传过来的内容要类似以下格式: ~~~ {"data":{"indicator":[{"name":"销售(sales)","max":6500},{"name":"管理(Administration)","max":16000},{"name":"信息技术(Information Techology)","max":30000},{"name":"客服(Customer Support)","max":38000},{"name":"研发(Development)","max":52000},{"name":"市场(Marketing)","max":25000}],"series":[{"data":[{"value":[4300,10000,28000,35000,50000,19000],"name":"预算分配(Allocated Budget)"}]}]}} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的,完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次,可以将刷新时间设置成“5000”; ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口,完成数据的更新。 ![](https://img.kancloud.cn/be/58/be58ee34e491d38971c593bec72431d9_690x1234.png)