html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="col-md-12" id="radarCharts" style="width: 100%;height:400px;margin-top: 10px;margin-bottom: 30px;">
</div>
<div/>
</body>
</html>
js
var randarCharts=echarts.init(document.getElementById('radarCharts'));
var option =
{
title : {
show:true,
text:'六大维度倾向',
x:'center',
textStyle:{color:'red'}
},
tooltip : {
show:true,
trigger: 'axis',//item,axis
showContent:true,
// showDelay:100,//显示延迟,单位ms
// transitionDuration:100,//动画变换时长
},
legend: {//图例
orient : 'horizontal',//horizontal' | 'vertical
x : 'center',//水平安放位置,默认为全图居中,'center' | 'left' | 'right' | {number}(x坐标,单位px)
y : 'bottom',
textStyle: {color:"auto"},
data:['个人','平均分'],
// data:[{name:'个人',textStyle: {color:"auto"}},{name:'平均分',textStyle: {color:"yellow"}}],
selectedMode:"multiple",//选择模式,默认开启图例开关,可选single,multiple
},
dataRange:{
show:false,//false后面配置不起作用
backgroundColor:"red",
borderColor:"blue",
min:0,
max:4,
range:{start:0,end:4},
calculable:true,
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
polar : [//极坐标
{
radius:'70%',//半径,支持绝对值(px)和百分比,百分比计算min(width, height) / 2 * 75%
startAngle:90,//开始角度, 有效输入范围:[-180,180]
splitNumber:4,// 分割段数,默认为5
type:'polygon',//极坐标的形状,'polygon'|'circle' 多边形|圆形
axisLine:{
show:false,
lineStyle:{
color:'#333',
type:'dashed',//'solid' | 'dotted' | 'dashed', 树图还可以选:'curve' | 'broken'
}
},//坐标轴线
axisLabel:{
show:true,
textStyle: {
fontSize:14,
color:'#333',
}
},//坐标轴文本标签
splitLine:{show:true},//分隔线
splitArea:{
show:true,
areaStyle:{
//color:['#4169E1','#00FA9A','#B22222','#DDA0DD']
// color:['#E0E0E0','#C0C0C0','#A8A8A8','#909090']
// color:['#D8D8D8','#66CCFF','#9966CC','#336699']
}
},//分隔区域
indicator : [
{ text: '尽责',max:4},
{ text: '情绪', max: 4,axisLabel:{show:false}},
{ text: '合作', max: 4,axisLabel:{show:false}},
{ text: '开放', max: 4,axisLabel:{show:false}},
{ text: '交往', max: 4,axisLabel:{show:false}},
{ text: '思维', max: 4,axisLabel:{show:false}}
]
}
],
series : [
{
//legendHoverLink:true,// 是否启用图例(legend)hover时的联动响应(高亮显示)
name: '六大维度倾向',
type: 'radar',
data : [
{
value : ["2.53", "3.26", "3.34", "3.61", "3.55", "3.24"],
name : '个人'
},
{
value : ["2.92", "3.00", "3.08", "3.16", "3.32", "2.87"],
name : '平均分'
}
]
}
],
calculable : true,//是否启用拖拽重计算特性
animation:true,//是否开启动画
backgroundColor:'#FFFFE0',
color:['#0000CD','#C71585','blue','green'],//数值系列颜色
};
randarCharts.setOption(option);
效果图