实现步骤
- Echarts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option - 定义各个维度的最大值
indicator: [{name: '易用性', max:100}, ......] - 准备具体产品的数据
data: [{name:'手机1', value:[80,90,80,82,90]},......] -
图表类型：
在series下设置type: radar
image.png
常用配置
-
显示数值
label:{
show: true
},
image.png
-
区域面积
areaStyle:{} // 将每一个产品的雷达图形成阴影的面积
image.png
-
绘制类型
在radar下配置
shape: 'circle' // 配置雷达图最外层的图形 circle polygon
image.png
雷达图的特点
- 雷达图可以用来分析多个维度的数据与标准数据的对比情况
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雷达图</title>
<script src="lib/echarts.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>
<script>
let myCharts = echarts.init(document.querySelector('div'))
//各个维度的最大值
let dataMax = [
{
name:'易用性',
max:100
},
{
name:'功能',
max:100
},
{
name:'拍照',
max:100
},
{
name:'跑分',
max:100
},
{
name:'续航',
max:100
},
]
let option = {
radar:{
indicator: dataMax, //配置各个维度的最大值
shape: 'circle' // 配置雷达图最外层的图形 circle polygon
},
series: [
{
type: 'radar', //radar 此图表是一个雷达图
label:{
show: true
},
areaStyle:{}, // 将每一个产品的雷达图形成阴影的面积
data: [
{
name:'手机1',
value:[80,90,80,82,90]
},
{
name:'手机2',
value:[70,82,75,70,78]
},
]
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
