1.基本雷达图
特色绘制：
触发设置
tooltip:{
confirm:true,
enterable:true,}
高亮设置
itemStyle:{
normal:{lineStyle:{width:2},opacity:0.6},
emphasis:{lineStyle:{width:8},opacity:1},
},案例完整代码
<!DOCTYPE html>
<html>
<head>
<script src="js/echarts.min.js" charset="utf-8"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '销售经理能力考核表',
target:'blank',top:'10',left:'160',textStyle:{color:'blue',fontSize:18,}
},
legend: {
show:true,
icon:'rect',
top:'14',
left:'430',
itemWidth:10,
itemHeight:10,
itemGap:30,
orient:'horizontal',
textStyle:{fontSize:15,color:'#000'},
data: ['王斌', '刘倩','袁波'],
},
tooltip:{
confirm:true,
enterable:true,
},
radar: {
// shape: 'circle',
center:['50%','56%'],
radius:160,
startAngle:90,
name:{
formatter:'{value}',
textStyle:{fontSize:15,color:'#000'}
},
indicator: [
{ name: '销售', max: 100 },
{ name: '沟通', max: 100 },
{ name: '服务', max: 100 },
{ name: '协作', max: 100 },
{ name: '培训', max: 100 },
]
},
series: [
{
name: '雷达图',
type: 'radar',
Symbol:'triangle',
itemStyle:{
normal:{lineStyle:{width:2},opacity:0.6},
emphasis:{lineStyle:{width:8},opacity:1},
},
data: [
{
value: [87.50,87.50,90.00,91.25,85.00],
name: '王斌'
},
{
value: [90.00,88.75,85.00,87.50,88.75],
name: '刘倩'
},
{
value: [92.50,91.25,88.75,92.50,91.25],
name: '袁波'
}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行结果
2.复制雷达图
视觉映射组件：
visualMap: {
top: 'middle',
right: 10,
color: ['red', 'yellow'],
calculable: true
},完整代码案例
<!DOCTYPE html>
<html>
<head>
<script src="js/echarts.min.js" charset="utf-8"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '销售经理能力考核表',
subtext: '浏览器占比',
top: 20,
left: 30
},
tooltip: {
trigger: 'item',
backgroundColor:'rgba(0,0,250,0.8)',
},
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: [
{ name: '销售', max: 400,color:'green' },
{ name: '沟通', max: 400,color:'blue' },
{ name: '服务', max: 400 ,color:'red'},
{ name: '协作', max: 400 ,color:'pink'},
{ name: '培训', max: 400 ,color:'orange'},
]
},
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>
运行结果
3.多雷达图
设置属性,来指定每个雷达图的位置和大小
center：['xx%','yy%'],
radius:zz,
完整代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
title: {
text: '销售经理能力考核表'
},
legend: {},
radar: [
{
indicator: [
{ text: '销售' },
{ text: '沟通' },
{ text: '服务' },
{ text: '协作' },
{ text: '培训' }
],
center: ['25%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
axisName: {
formatter: '【{value}】',
color: '#428BD4'
},
splitArea: {
areaStyle: {
color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
}
},
{
indicator: [
{ name: '销售', max: 100 },
{ name: '沟通', max: 100 },
{ name: '服务', max: 100 },
{ name: '协作', max: 100 },
{ name: '培训', max: 100 },
],
center: ['75%', '50%'],
radius: 120,
axisName: {
color: '#fff',
backgroundColor: '#666',
borderRadius: 3,
padding: [3, 5]
}
}
],
series: [
{
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
data: [
{
value: [87.50,87.50,90.00,91.25,85.00],
name: '王斌'
},
{
value: [90.00,88.75,85.00,87.50,88.75],
name: '刘倩'
},
{
value: [92.50,91.25,88.75,92.50,91.25],
name: '袁波'
},
]
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: [87.50,87.50,90.00,91.25,85.00],
name: '王斌',
symbol: 'rect',
symbolSize: 12,
lineStyle: {
type: 'dashed'
},
label: {
show: true,
formatter: function (params) {
return params.value;
}
}
},
{
value: [90.00,88.75,85.00,87.50,88.75],
name: '刘倩',
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: 'rgba(255, 145, 124, 0.1)',
offset: 0
},
{
color: 'rgba(255, 145, 124, 0.9)',
offset: 1
}
])
}
}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行结果
