最终实现效果图:
首先画出一个雷达图,然后使用css画出旋转光圈效果定位到雷达图正中心,就实现了该特效。
其中绿色扇形光圈是顺时针转动的。
实现代码如下:
<div class='right'>
<!-- 雷达图 -->
<div ref="chart" style="width: 100%; height: 100%" id="chart"></div>
<!-- 雷达扫描射线 -->
<div id="radar"></div>
</div>
private getRadarChart() {
const chartDom: any = this.$refs.chart
this.myChart = echarts.init(chartDom)
const that = this
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function() {
that.myChart.resize()
})
var option = {
radar: {
shape: 'circle', // 设置雷达图形状,值有circle、square,默认为方形
splitNumber: 5, // 雷达图圈数设置
indicator: [// 不同的参照条件,可以设定最大值和最小值
{ name: '本体', max: 0 },
{ name: '套管', max: 0 },
{ name: '有载开关', max: 0 },
{ name: '非电量保护', max: 0 },
{ name: '冷却器', max: 0 }
],
axisLine: { // 设置雷达图中间射线的颜色
lineStyle: {
color: '#c0c0c0'
}
},
splitArea: { // 设置图表颜色,show的值为true
show: true,
areaStyle: {
// color:"#c1ddf8", //一般设置方式
// 设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
// a ,b,c,d值可为0,1 a:1表示arr中的颜色右到左;c:1 arr中的颜色左到右
// b:1表示arr中的颜色下到上;d:1表示arr中的颜色上到下
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#c1ddf8' }, // 0% 处的颜色
{ offset: 1, color: '#1e83e4' }// 100% 处的颜色
], false)
}
},
splitLine: { // 网格颜色设置
show: true,
lineStyle: {
width: 1,
color: '#1e83e4'
}
},
name: { // 修改indicator文字的颜色
textStyle: {
color: 'white',
fontSize: 10
}
}
},
series: [{
type: 'radar',
symbol: 'circle', // 单个数值点的样式,还可以取值'rect','angle'等
symbolSize: 5, // 数值点的大小
symbolColor: 'red',
data: [
{
value: [this.result.bodyScore, this.result.bushingScore, this.result.oltcscore, this.result.nonElectricQuantityProtectionScore, this.result.coolerScore],
itemStyle: { // 该数值区域样式设置
normal: {
show: false,
color: 'rgba(255,225,0,.3)', // 背景颜色,还需设置areaStyle
lineStyle: {
color: 'rgba(255,225,0,.8)' // 边框颜色
}
}
},
label: { // 显示value中具体的数值
normal: {
show: true,
position: 'inside',
textStyle: { // 更改数值样式
color: 'white'
}
}
},
areaStyle: { // 设置区域背景颜色透明度
normal: {
width: 1,
opacity: 0.8
}
},
lineStyle: {
normal: {
width: 0
}
}
}
]
}]
}
option && this.myChart.setOption(option)
}
css代码:
.right{
width: 65%;
height: 200px;
position: relative;
}
#radar:after {
content: '';
display: block;
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
width: 75px;
height: 75px;
position: absolute;
top: 25px;
right: 50%;
animation: radar-beam 15s 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);
}
}