伪雷达echarts radar配置项内容和展示

      var radarStyle = document.createElement("style"); 
var str = `
    #radar:after {
	  content: ' ';
	  display: block;
	  background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
	  width: 180px;
	  height: 180px;
	  position: absolute;
	  top: 14%;
	  left: 14%;
	  animation: radar-beam 4s infinite;
	  animation-timing-function: linear;
	  transform-origin: bottom right;
	  border-radius: 100% 0 0 0;
	}
	@keyframes radar-beam {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
`;
if(radarStyle.styleSheet){         //ie下  
    radarStyle.styleSheet.cssText = str;  
} else {  
    radarStyle.innerHTML = str;
};
document.getElementsByTagName("head")[0].appendChild(radarStyle);

var radarDiv = document.createElement('div');
radarDiv.id = 'radar';
radarDiv.style.position = 'relative';
radarDiv.style.width = '500px';
radarDiv.style.height = '500px';
radarDiv.style.margin = '0 auto';
var body = document.querySelector('body');
body.appendChild(radarDiv);

var mockData = [{
	text: '指标一',
	value: 2
}, {
	text: '指标二',
	value: 3.2
}, {
	text: '指标三',
	value: 5
}, {
	text: '指标四',
	value: 4.1
}, {
	text: '指标五',
	value: 2.8
}];

var container = document.getElementById('radar');
var radar = echarts.init(container);

initRadar(mockData);

function initRadar(mockData){
    var minAngle = 10;	// 最小角度
    var indicator = [];
    var data = [];
    var idx = 0;
    var randomArr = getRandom(360 / minAngle, mockData.length);
    for(var i=0;i<360 / minAngle;i++){
    	if(randomArr.indexOf(i) > -1){
    		indicator.push({
    			text: mockData[idx].text
    		});
    		data.push(mockData[idx].value);
    		idx++;
    	}else{
    		indicator.push({
    			text: i * 10 + '`'
    		});
    		data.push('-');
    	}
    };
    var option = {
    	backgroundColor: '#333',
        radar: [
            {
                indicator: indicator,
                center: ['50%', '50%'],
                radius: 180,
                startAngle: 90,
                splitNumber: 4,
                shape: 'circle',
                name: {
                	show: false,
                    // formatter:'【{value}】',
                    // textStyle: {
                    //     color:'rgba(0, 255, 51, 1)'
                    // }
                },
                splitArea: {
                    areaStyle: {
                    	color: 'rgba(255, 255, 255, 0)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 255, 51, 0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 255, 51, 1)'
                    }
                }
            }
        ],
        series: [
            {
                name: '雷达图',
                type: 'radar',
                symbol: 'circle',
                symbolSize: 24,
                silent: true,
                animationEasing: 'quarticOut',
                animationEasingUpdate: 'quarticOut',
                animationDuration: 2000,
                animationDurationUpdate: 2000,
                label: {
                	normal: {
                		show: true,
                		textStyle: {
                			color: 'rgba(0, 255, 51, 1)'
                		}
                	}
                },
                itemStyle: {
                	normal: {
                		opacity: 0
                	},
                	emphasis: {
                    	color: {
                    		type: 'radial',
                    		x: 0.5,
                    		y: 0.5,
                    		r: 0.3,
                    		colorStops: [{
                    			offset: 0,
                    			color: 'rgba(0, 255, 51, 1)'
                    		}, {
                    			offset: 1,
                    			color: 'rgba(255, 255, 255, .1)'
                    		}]
                    	},
                    	borderWidth: 0, 
                    	opacity: 1
                    }
                },
                data: [
                    {
                        value: data,
                        label: {
                        	normal: {
                        		textStyle: {
                        			color: 'rgba(0, 255, 51, 1)'
                        		}
                        	}
                        },
                        lineStyle: {
                            normal: {
                                opacity: 0
                            }
                        }
                    }
                ]
            }
        ]
    };
    
    radar.setOption(option);
    
    function getRandom(range, count){
    	var randomArr = [];
    	for(var i = 0;i < count;i++){
    		var r = Math.round(Math.random() * (range - 1));
    		randomArr.push(r);
    	}
    	return randomArr;
    }
}

// 点动画
(function(){
	var highlight = false;
	var type;
	setInterval(function(){
	    initRadar(mockData);
		type = highlight ? 'downplay' : 'highlight';
		radar.dispatchAction({
			type: type,
			seriesIndex: 0
		});
		highlight = !highlight;
	}, 2000);
})();