Skip to content

Instantly share code, notes, and snippets.

@jorben
Created August 11, 2017 08:26
Show Gist options
  • Save jorben/c6cc6641f8d02bd424bc15c8dd96844d to your computer and use it in GitHub Desktop.
Save jorben/c6cc6641f8d02bd424bc15c8dd96844d to your computer and use it in GitHub Desktop.
echart V3 版雷达配置
// 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