echarts雷达图实现动态扫描效果

本文介绍: 首先画出一个雷达图，然后使用 css画出旋转光圈效果定位到雷达图正中心，就实现了该特效。其中绿色扇形光圈是顺时针转动的。

最终实现 效果图：

在这里插入图片描述
首先画出一个雷达图，然后使用 css画出旋转光圈效果定位到雷达图正中心，就实现了该特效。
其中绿色扇形光圈是顺时针转动的。
实现代码如下：

	&lt;div class='right'&gt;
	  &lt;!-- 雷达图 --&gt;
	  &lt;div ref="chart" style="width: 100%; height: 100%" id="chart"&gt;</div&gt;
      <!-- 雷达扫描射线 --&gt;
      <div id="radar"&gt;</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 &amp;&amp; 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);
      }
  }