Echarts 雷达图_echarts雷达图百分比_听風吟的博客-程序员秘密

技术标签： web前端 canvas JavaScript javascript

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

效果图

本文链接：https://blog.csdn.net/lxlsygxs2017/article/details/116264658

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

vbox 安装 arch ping 不通主机宿主机网络不可达_提及的博客-程序员秘密

1 2 3 4sudo ip addr add 192.168.1.1/24 [broadcast 192.168.1.255] dev 设备名 label 设备名:别称1 虚拟ip的地址，子网掩码可以修改2 可选的广播3 和 4 的设备名必须一致4 别称可以是字母数字，甚至中文尝试建立一个虚拟ip，之后可以删除。反正我弄就连得通了。。。...

联邦学习笔记（四）：使用底层API设计联邦学习平均算法_noniid keras_young_monkeysun的博客-程序员秘密

设计联邦学习平均算法写在前面联邦平均算法流程数据处理加载数据集数据集预处理获取处理后的数据集前向运算和损失函数获取代码输入类型创建初始模型联邦学习训练和梯度下降单batch梯度下降整个数据集梯度下降计算联邦学习评估函数本地模型评估联邦学习全局评估联邦平均算法训练实验结果loss值总结写在前面使用TFF框架实现联邦学习算法，与tf有很大差别。由于tff框架设计之初是为了能够在现实设备中部署，所以底层设计语言用的不是python。因此，使用python或者tf代码编写的算法，不能直接在TFF框架中使用。这是

启动Oracle服务和监听器_摄影高手的博客-程序员秘密

启动Oracle服务和监听器

MySQL 中的 zerofill 和 tinyint(5)_tinyint(1) unsigned zerofill_lamp_yang_3533的博客-程序员秘密

在 MySQL 中，zerofill 字段约束表示用零填充，配合整型后面的小括号中的数值一起生效。整型后面的小括号中的数值，用于指定整型数据的长度（宽度）。若使用了 zerofill，当实际长度达不到指定的显示长度时，就会用 0 在前面补齐。对于 tinyint 数据类型，只占 1 个字节：无符号的（unsigned），范围是 0 到 255，默认长度是 3。有符号的（sign...

将PDF电子书转换成EPUB格式_Tyrion-Lannister的博客-程序员秘密

你是否想在电子阅读器或是手机上阅读PDF电子书，但对其表现性能感到不满呢？下面就将教你如何将PDF转换成流行的ePub格式，这样你就能轻松地在任何设备上阅读PDF电子书了。PDF是一种很受欢迎的电子书格式，因为它在任何设备都，而且和印刷书籍的排版保持着精确的一致。尽管如此，这一优点在移动设备上却成了最主要的短处，因为为了能看到页面上的全面内容你不能不来地缩放，并上下左右移动。相对来说，eP

Directx9学习（五）输入_directx 9 键盘输入_Drift丶星尘的博客-程序员秘密

2017.08.25今天学习一下DX从键盘和鼠标获得输入