Echarts radar chart

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>

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);

renderings

おすすめ