雷达图将多个维度的数据映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就成了雷达图。
在坐标轴设置恰当的情况下，雷达图所围面积能表现出一些信息量。雷达图把纵向和横向的分析比较方法结合起来，可以展示出数据集中各个变量的权重高低情况，适用于展示性能数据。
雷达图不仅对于查看哪些变量具有相似的值、变量之间是否有异常值有效，而且可用于查看哪些变量在数据集内得分较高或较低。此外，雷达图也常用于排名、评估、评论等数据的展示。
- 绘制基本雷达图
利用各教育阶段男女人数统计数据查看男女学生在各教育阶段的人数高低情况，如图所示。
由图可知，显示了各教育阶段的男女人数的统计。同时可以看出，在高中和硕士阶段，男女学生人数相差不大，而在博士阶段，男女学生人数则相差较大。
图例源代码如下：
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="https://juejin.cn/post/js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM--->
<div id="main" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = { //指定图表的配置项和数据
backgroundColor: 'rgba(204,204,204,0.7)', //配置背景色，默认无背景
title: { //配置标题组件
text: '各教育阶段男女人数统计',
target: 'blank', top: '10', left: '160', textStyle: { color: 'blue', fontSize: 18, }
},
legend: { //配置图例组件
show: true, //设置是否显示图例
icon: 'rect', //icon.'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
top: '14', //设置图例距离顶部边距
left: 430, //设置图例距离左侧边距
itemWidth: 10, //设置图例标记的图形宽度
itemHeight: 10, //设置图例标记的图形高度
itemGap: 30, //设置图例每项之间的间隔
orient: 'horizontal', //设置图例列表的布局朝向，'horizontal'|'vertical'
textStyle: { fontSize: 15, color: '#fff' }, //设置图例的公用文本样式
data: [ //设置图例的数据数组，数组项通常为字符串，每项代表一个系列name
{
name: '男', icon: 'rect',
textStyle: { color: 'rgba(51,0,255,1)', fontWeight: 'bold' }
}, //设置图例项的文本样式
{
name: '女', icon: 'rect',
textStyle: { color: 'rgba(255,0,0,1)', fontWeight: 'bold' }
} //'normal'|'bold'|'bolder'|'lighter'
],
},
tooltip: { //配置详情提示框组件
//设置雷达图的tooltip不会超出div，也可设置position属性
//设置定位不会随着鼠标移动而变化
confine: true, //设置是否将tooltip框限制在图表的区域内
enterable: true, //设置鼠标是否可以移动到tooltip区域内
},
radar: [{ //配置雷达图坐标系组件，只适用于雷达图
center: ['50%', '56%'], //设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
radius: 160, //设置圆的半径，数组的第一项是内半径，第二项是外半径
startAngle: 90, //设置坐标系起始角度，也就是第一个指示器轴的角度
name: { //设置（圆外的标签）雷达图每个指示器名称
formatter: '{value}',
textStyle: { fontSize: 15, color: '#000' }
},
nameGap: 2, //设置指示器名称和指示器轴的距离，默认为15
splitNumber: 2, //设置指示器轴的分割段数，default
//shape:'circle', //设置雷达图绘制类型，支持'polygon','circle'
//设置坐标轴轴线设置
axisLine: { lineStyle: { color: '#fff', width: 1, type: 'solid', } },
//设置坐标轴在grid区域中的分隔线
splitLine: { lineStyle: { color: '#fff', width: 1, } },
splitArea: {
show: true,
areaStyle: { color: ['#abc', '#abc', '#abc', '#abc'] }
}, //设置分隔区域的样式
indicator: [ //配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
{ name: '高中', max: 9000000 }, { name: '专科', max: 5000000 },
{ name: '本科', max: 3500000 }, { name: '硕士', max: 800000 },
//设置指示器的名称，最大值，标签的颜色
{ name: '博士', max: 20000 }]
}],
series: [{
name: '雷达图', //系列名称，用于tooltip的显示，图例筛选
type: 'radar', //系列类型: 雷达图
//拐点样式，'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
symbol: 'triangle',
itemStyle: { //设置折线拐点标志的样式
normal: { lineStyle: { width: 1 }, opacity: 0.2 }, //设置普通状态时的样式
emphasis: { lineStyle: { width: 5 }, opacity: 1 } //设置高亮时的样式
},
data: [ //设置雷达图的数据是多变量(维度)
{ //设置第1个数据项
name: '女', //数据项名称
value: [4400000, 2700000, 1600000, 380000, 7000], //value是具体数据
symbol: 'triangle',
symbolSize: 5, //设置单个数据标记的大小
//设置拐点标志样式
itemStyle: { normal: { borderColor: 'blue', borderWidth: 3 } },
//设置单项线条样式
lineStyle: { normal: { color: 'red', width: 1, opacity: 0.9 } },
//areaStyle: {normal:{color:'red'}} //设置单项区域填充样式
},
{ //设置第2个数据项
name: '男', value: [4600000, 2300000, 1900000, 420000, 13000],
symbol: 'circle',
symbolSize: 5, //设置单个数据标记的大小
itemStyle: { normal: { borderColor: 'rgba(51,0,255,1)', borderWidth: 3, } },
lineStyle: { normal: { color: 'blue', width: 1, opacity: 0.9 } },
//areaStyle:{normal:{color:'blue'}} //设置单项区域填充样式
}
]
},]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
复制代码基本雷达图是一个比较简单的雷达图。当利用浏览器占比变化数据绘制稍为复杂的雷达图时，如图所示。
由图可知，显示了各个浏览器占比的预测，并加了一个visualMap组件（视觉映射组件），即把数据的哪个维度映射到什么视觉元素上。此外，还增加了一个滚动图例。
图例的源代码如下：
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="https://juejin.cn/post/js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM--->
<div id="main" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = { //指定图表的配置项和数据
backgroundColor: 'rgba(204,204,204,0.7)', //配置背景色，默认无背景
title: { //配置标题组件
text: '浏览器占比变化', textStyle: { color: 'blue' },
top: 20, left: 30
},
tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,250,0.8)' },
legend: { //配置图例组件
type: 'scroll', bottom: 15,
data: (function () {
var list = [];
for (var i = 1; i <= 28; i++) {
list.push(i + 2000 + '');
}
return list;
})()
},
visualMap: { top: '47%', right: 20, color: ['red', 'yellow'], calculable: true },
radar: { //配置雷达图坐标系组件，只适用于雷达图
nameGap: 2, //设置指示器名称和指示器轴的距离，默认为15
indicator: [ //设置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
{ text: 'IE8-', max: 400, color: 'green' },
{ text: 'IE9+', max: 400, color: 'green' },
{ text: 'Safari', max: 400, color: 'blue' },
{ text: 'Firefox', max: 400, color: 'blue' },
{ text: 'Chrome', max: 400, color: 'red' }
]
},
series: (function () { //配置数据系列
var series = [];
for (var i = 1; i <= 28; i++) {
series.push({
name: '浏览器(数据纯属虚构)', type: 'radar', symbol: 'none',
lineStyle: { width: 1 },
emphasis: { areaStyle: { color: 'rgba(0,250,0,0.3)' } },
data: [ //设置雷达图的数据是多变量（维度）
{
value: [
(40 - i) * 10,
(38 - i) * 4 + 60,
i * 5 + 10,
i * 9,
i * i / 2
],
name: i + 2000 + ''
}]
});
}
return series;
})()
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
复制代码- 绘制多雷达图
前面介绍过的基本雷达图，只能表示一类事物的维度变量。当想要同时表现几类不同事物的维度变量时，就需要使用多雷达图进行展示。利用某软件的性能、小米与苹果手机的功能、降水量与蒸发量的数据展示出3类数据中的不同维度变量，如图所示。
由图可知，显示了3个不同的雷达图。当鼠标移动到图中的某一个雷达图的维度时，会显示出这一个维度的详细信息。
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM--->
<div id="main" style="width: 700px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = { //指定图表的配置项和数据
color: ["red", 'green', 'blue', '#660099', '#FA8072', 'grey'], //使用自己预定义的颜色
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
title: { //配置标题组件
text: '多雷达图', top: 15,
textStyle: { color: 'green' }, left: 240
},
tooltip: { trigger: 'axis' }, //配置标题组件
//配置图例组件
legend: { top: 560, left: 140, data: ['某软件', '小米', '苹果', '降水量', '蒸发量'] },
radar: [ //设置雷达图坐标系组件，只适用于雷达图
{
nameGap: 3, shape: 'polygon', //'polygon'|'circle'
name: {
textStyle: {
fontSize: 12, color: '#fff', backgroundColor: 'green',
borderRadius: 3, padding: [2, 2]
}
},
indicator: [ //设置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
{ text: '品牌', max: 100 }, { text: '内容', max: 100 },
{ text: '可用性', max: 100 }, { text: '功能', max: 100 }
],
center: ['25%', '30%'], radius: 80 //指定第1个雷达图的位置
},
{
nameGap: 3, shape: 'polygon', //'polygon'|'circle'
name: {
textStyle: {
fontSize: 12, color: '#fff', backgroundColor: 'blue',
borderRadius: 3, padding: [2, 2]
}
},
//设置雷达图指示器，指定雷达图中的多个变量
indicator: [{ text: '外观', max: 100 },
{ text: '拍照', max: 100 }, { text: '系统', max: 100 },
{ text: '性能', max: 100 }, { text: '屏幕', max: 100 }],
center: ['60%', '30%'], radius: 80 //指定第2个雷达图的位置
},
{
nameGap: 3, shape: 'polygon', //'polygon'和'circle'
name: {
textStyle: {
fontSize: 12, color: 'red', backgroundColor: 'lightblue',
borderRadius: 3, padding: [2, 2]
}
},
indicator: (function () {
var res = [];
for (var i = 1; i <= 12; i++) { res.push({ text: i + '月', max: 100 }); }
return res;
})(),
center: ['41%', '67%'], radius: 80, //指定第3个雷达图的位置
}
],
series: [ //配置数据系列
{ //设置第1个数据项：某软件
type: 'radar', tooltip: { trigger: 'item' },
itemStyle: { normal: { areaStyle: { type: 'default' } } },
//设置第1个数据项的具体数据
data: [{ value: [65, 72, 88, 80], name: '某软件' }]
},
{ //设置第2个数据项：小米与苹果
type: 'radar', radarIndex: 1,
tooltip: { trigger: 'item' },
data: [ //设置第2个数据项的具体数据
{ value: [85, 90, 90, 95, 95], name: '小米' },
{ value: [95, 80, 95, 90, 93], name: '苹果' }]
},
{ //设置第3个数据项：降水量与蒸发量
type: 'radar', radarIndex: 2,
tooltip: { trigger: 'item' },
itemStyle: { normal: { areaStyle: { type: 'default' } } },
data: [ //设置第3个数据项的具体数据
{ name: '降水量', value: [5, 6, 9, 56, 69, 73, 77, 88, 50, 22, 7, 5] },
{ name: '蒸发量', value: [3, 5, 8, 34, 45, 77, 68, 65, 36, 23, 7, 4] }
]
}]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
