雷达图
时间:2022-07-25
本文章向大家介绍雷达图,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
let option = {
/* 标题 /
title: {
text: '自定义雷达图'
},
/ 说明图 /
legend: {
data: ['图一','图二', '张三', '李四']
},
radar: [
{
/ 边角label /
indicator: [
{ text: '指标一' },
{ text: '指标二' },
{ text: '指标三' },
{ text: '指标四' },
{ text: '指标五' }
],
/ 边角label展示名称格式化 /
name: {
formatter: '【{value}】',
textStyle: {
color: '#72ACD1'
}
},
/ 中心坐标 /
center: ['50%', '50%'],
/ 半径 /
radius: 120,
/ 开始角度 /
startAngle: 90,
/ 内部分割部分数 /
splitNumber: 4,
/ 内部分割形状 /
shape: 'circle',
/ 内部分割区域配置 /
splitArea: {
/ css /
areaStyle: {
/ 颜色,每个区域的颜色 /
color: ['rgba(114, 172, 209, 0.2)',
'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
/ 阴影颜色 /
shadowColor: 'rgba(0, 0, 0, 0.3)',
/ 阴影半径 /
shadowBlur: 10
}
},
/ 轴线配置 /
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
},
/ 网格线配置 */
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
}
],
series: [
{
name: '雷达图',
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
data: [
{
value: [100, 8, 0.40, -80, 2000],
name: '图一',
symbol: 'rect',
symbolSize: 5,
lineStyle: {
type: 'dashed'
}
},
{
value: [60, 5, 0.30, -100, 1500],
name: '图二',
areaStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
]
}
]
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP抽象类基本用法示例
- keras分类模型中的输入数据与标签的维度实例
- keras的三种模型实现与区别说明
- PHP智能识别收货地址信息实例
- Keras 在fit_generator训练方式中加入图像random_crop操作
- PHP面向对象程序设计继承用法简单示例
- php根据命令行参数生成配置文件详解
- PHP使用SOAP调用API操作示例
- 使用Zookeeper分布式部署PHP应用程序
- pytorch判断是否cuda 判断变量类型方式
- Keras搭建自编码器操作
- python程序如何进行保存
- Android Q之气泡弹窗的实现示例
- Python with语句用法原理详解
- pytorch 计算ConvTranspose1d输出特征大小方式