Created
August 11, 2017 08:26
-
-
Save jorben/c6cc6641f8d02bd424bc15c8dd96844d to your computer and use it in GitHub Desktop.
echart V3 版雷达配置
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// echarts V3 版本 | |
option = { | |
title: { | |
text: '多维度雷达图展示' | |
}, | |
tooltip: {show: true}, | |
legend: { | |
data: ['期望', '实际'] | |
}, | |
radar: { | |
shape: 'circle', // polygon 圆形or多边形 | |
indicator: [ | |
{name : '第一维度', max : 100, axisTick:{show: true}, axisLabel:{show : true, nameStyle :{color:'#e6e6e6'}}}, | |
{name : '第二维度', max : 100}, | |
{name : '第三维度', max : 100}, | |
{name : '第四维度', max : 100, axisLabel:{show : false, nameStyle :{color:'#5cc'}}}, | |
{name : '第五维度', max : 100}, | |
{name : '第六维度', max : 100}, | |
{name : '第七维度', max : 100, axisLabel:{show : false, nameStyle :{color:'#5cc'}}}, | |
{name : '第八维度', max : 100}, | |
{name : '第九维度', max : 100}, | |
{name : '第十维度', max : 100, axisLabel:{show : false, nameStyle :{color:'#5cc'}}}, | |
{name : '第士维度', max : 100}, | |
{name : '第十二维度', max : 100}, | |
{name : '第十三维度', max : 100, axisLabel:{show : false, nameStyle :{color:'#5cc'}}}, | |
{name : '第十四维度', max : 100}, | |
{name : '第十五维度', max : 100} | |
], | |
center: ['50%','50%'], | |
// radius: 50%, | |
splitNumber:4, // 分割段数 | |
nameGap:20, // 维度字符与雷达盘间距 | |
name : { | |
formatter: function (value, indicator) { | |
if('第一维度' == value || '第二维度' == value){ | |
indicator.nameTextStyle = {color:'#009'}; | |
}else if('第五维度' == value || '第三维度' == value || '第四维度' == value){ | |
indicator.nameTextStyle = {color:'#0c9'}; | |
}else if('第八维度' == value || '第九维度' == value || '第六维度' == value || '第七维度' == value){ | |
indicator.nameTextStyle = {color:'#633'}; | |
}else if('第十二维度' == value || '第十维度' == value || '第士维度' == value){ | |
indicator.nameTextStyle = {color:'#90f'}; | |
}else{ | |
indicator.nameTextStyle = {color:'#c63'}; | |
} | |
return value; | |
} | |
}, | |
axisLabel:{ | |
formatter: function(value, index){ | |
return value?value:''; // 刻度上不展示0 | |
} | |
}, | |
axisTick: { | |
// show: true, | |
lineStyle: { | |
color: 'red' | |
} | |
}, | |
}, | |
series: [{ | |
color: ['rgba(46, 199, 201, 0.7)', 'rgba(182,162,222,0.7)', '#c23531','#2f4554', '#61a0a8', '#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], | |
name: '多维度实际与期望雷达图', | |
type: 'radar', | |
areaStyle: {normal: { }}, | |
data : [ | |
{ | |
value : [72, 88, 94, 90, 86, 54, 84, 50, 78, 66, 84, 55, 91, 77, 56], | |
name : '期望' | |
}, | |
{ | |
value : [40, 92, 89, 80, 71, 64, 88, 33, 70, 79, 77, 51, 90, 69, 51], | |
name : '实际' | |
} | |
] | |
}] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment