本文展示了如何使用ECharts库在HTML中创建基本雷达图、浏览器占比变化雷达图以及多雷达图（蜘蛛网图），包括配置项详解和数据可视化实例。
数据表格
一，基本雷达图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="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 = { // 指定图表的配置项和数据
color: ["red", 'blue', 'black'],
backgroundColor: 'rgba(204,204,204,0.7)', // 配置背景色，默认无背景
title: { // 配置标题组件
text: '3个销售代表各方面能力情况',
target: 'blank',
top: '10',
left: '160',
textStyle: {
color: 'green',
fontSize: 18,
}
},
legend: { // 配置图例组件
type:'scroll',
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: '王斌',
textStyle: {
color: 'rgba(255,0,0,1)',
fontWeight: 'bold'
}
}, // 设置图例项的文本样式
{
name: '刘倩',
textStyle: {
color: 'rgba(51,0,255,1)',
fontWeight: 'bold'
}
}, //'normal'|'bold'|'bolder'|'lighter'
{
name: '袁波',
textStyle: {
color: 'rgba(0,0,0,1)',
fontWeight: 'bold'
}
}
],
},
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: 100
}, {
name: '沟通',
max: 100
},
{
name: '服务',
max: 100
}, {
name: '协作',
max: 100
},
// 设置指示器的名称，最大值，标签的颜色
{
name: '培训',
max: 100
}
]
}],
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: [87.50, 87.50, 90.00, 91.25, 85.00], //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: [90.00, 88.75, 85.00, 87.50, 88.75],
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'}} // 设置单项区域填充样式
},
{ // 设置第3个数据项
name: '袁波',
value: [92.50, 91.25, 88.75, 92.50, 91.25],
symbol: 'arrow',
symbolSize: 5, // 设置单个数据标记的大小
itemStyle: {
normal: {
borderColor: 'rgba(0,0,0,1)',
borderWidth: 3,
}
},
lineStyle: {
normal: {
color: 'black',
width: 1,
opacity: 0.9
}
},
}
]
}, ]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
二，浏览器占比变化雷达图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="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 = { // 指定图表的配置项和数据
title: {
text: '浏览器占比变化',
top: 10,
left: 10
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
bottom: 10,
data: (function () {
var list = [];
for (var i = 1; i <= 28; i++) {
list.push(i + 2000 + '');
}
return list;
})()
},
visualMap: {
top: 'middle',
right: 10,
color: ['red', 'yellow'],
calculable: true
},
radar: {
indicator: [
{ 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({
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>
三，多雷达图（蜘蛛网图）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="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 = { // 指定图表的配置项和数据
title: {
text: '多雷达图'
},
tooltip: {
trigger: 'axis'
},
legend: {
left: 'center',
data: [
'某软件',
'小米',
'苹果',
'降水量',
'蒸发量'
]
},
radar: [
{
indicator: [
{ text: '品牌', max: 100 },
{ text: '内容', max: 100 },
{ text: '可用性', max: 100 },
{ text: '功能', max: 100 }
],
center: ['25%', '40%'],
radius: 80
},
{
indicator: [
{ text: '外观', max: 100 },
{ text: '拍照', max: 100 },
{ text: '系统', max: 100 },
{ text: '性能', max: 100 },
{ text: '屏幕', max: 100 }
],
radius: 80,
center: ['50%', '60%']
},
{
indicator: (function () {
var res = [];
for (var i = 1; i <= 12; i++) {
res.push({ text: i + '月', max: 100 });
}
return res;
})(),
center: ['75%', '40%'],
radius: 80
}
],
series: [
{
type: 'radar',
tooltip: {
trigger: 'item'
},
areaStyle: {},
data: [
{
value: [60, 73, 85, 40],
name: '某软件'
}
]
},
{
type: 'radar',
radarIndex: 1,
areaStyle: {},
data: [
{
value: [85, 90, 90, 95, 95],
name: '小米'
},
{
value: [95, 80, 95, 90, 93],
name: '苹果'
}
]
},
{
type: 'radar',
radarIndex: 2,
areaStyle: {},
data: [
{
name: '降水量',
value: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '蒸发量',
value: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
]
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
1790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
